用CSS绘制一个三角形

小草莓蹦蹦跳

已于 2023-10-17 11:51:07 修改

阅读量1.3k

点赞数

分类专栏： CSS3 每日专栏文章标签： css 前端

于 2020-07-22 22:50:48 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/107525491

版权

每日专栏同时被 2 个专栏收录

226 篇文章 4 订阅

订阅专栏

CSS3

55 篇文章 2 订阅

订阅专栏

1、使用 border 实现

① 原理：

一个盒子的宽高为0时，由其边框粗细和颜色决定盒子的状态。盒子的四个边框组合成为一个正方形的盒子。如图：

当一边有颜色，其他都是透明色的时候，就是我们想要的三角形了。如图

那如何显示一个直角三角形呢，只需要将临近的两边都显示颜色，其他都是透明即可！如图

② 实际例子：

<head>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-right: 60px solid transparent;
            border-bottom: 60px solid green;
            border-left: 60px solid transparent;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>

<head>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-top: 60px solid skyblue;
            border-right: 60px solid transparent;
            border-bottom: 60px solid transparent;
            border-left: 60px solid skyblue;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>

等边三角形：

<head>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-right: 69px solid transparent;
            border-left: 69px solid transparent;
            border-bottom: 120px solid skyblue;
        }   
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>

具体代码：

用css创建一个三角形，并简述原理_小草莓蹦蹦跳的博客-CSDN博客

2、linear-gradient

linear-gradient 需要结合 background-image 来实现三角形，下面就来逐步使用渐变实现一个三角形。输入密码 · 语雀

<head>
    <style>
        .triangle {
            width: 120px;
            height: 200px;
            background-repeat: no-repeat;
            outline: 2px solid red;
            background-image: linear-gradient(40deg, blue 50%, rgba(255,255,255,0) 50%), linear-gradient(140deg, blue 50%, rgba(255,255,255,0) 50%);
            background-size: 100% 50%;
            background-position: top left, bottom left;
        }   
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>

3、 clip-path

最后一种方法 —— clip-path，它是最精简和最可具扩展性的。

不过目前其在浏览器兼容性不是很好，使用时要考虑浏览器是否支持。

① 原理

使用 clip-path 可以为沿路径放置的每个点定义坐标。在这种情况下，就定义了三个点：
top-left (0 0) 、 bottom-left (0% 100%) 、 right-center (100% 50%)

clip-path 就是使用它来绘制多边形(或圆形、圆形等)并将其定位在元素内。实际上，浏览器不会绘制 clip-path 之外的任何区域，因此我们看到的是 clip-path 的边界。

② 实例例子

<head>
    <style>
        .triangle {
            width: 120px;
            height: 200px;
            background-color: red;
            clip-path: polygon(0 0, 0 100%, 100% 50%);
        }   
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>

小草莓蹦蹦跳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
用CSS绘制一个三角形

实际上，浏览器不会绘制 clip-path 之外的任何区域，因此我们看到的是 clip-path 的边界。linear-gradient 需要结合 background-image 来实现三角形，下面就来逐步使用渐变实现一个三角形。那如何显示一个直角三角形呢，只需要将临近的两边都显示颜色，其他都是透明即可！最后一种方法 —— clip-path，它是最精简和最可具扩展性的。当一边有颜色，其他都是透明色的时候，就是我们想要的三角形了。使用 clip-path 可以为沿路径放置的每个点定义坐标。
复制链接

扫一扫

专栏目录