如何用 css 实现三角形？

你是不是还在用这种方式，利用 border 的 color 属性来实现三角形。

.triangle {
    width: 0;
    height: 0;
    border: 5px solid #000;
    border-color: transparent transparent #000 transparent;
}

今天给大家介绍一个 css 中的一个不是很常用的属性 clip-path 来实现一个三角形。

.polygon {
     width: 100px；
     height: 100px;
     background-color: red;
     clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

了解clip-path

顾名思义，『剪裁』，它可以按照 svg 路径、盒子模型、基本多边形路径等几种不同的方式来裁切。clip-path 有几大类，分别为：

• basic-shape： 基本图形，包括 inset()、circle()、ellipse()、polygon()
• clip-source： 通过 url() 方法引用一段 SVG 的 <clipPath> 来作为剪裁路径
• geometry-box：单独使用时，将指定框的边缘作为剪裁路径，或者配合 basic-shape 使用，用于定义剪裁的参考框（Reference Box）（由于该属性浏览器支持度比较低，本文暂不讨论）

SVG剪裁

语法：clip-path: url ();先定义一个svg路径,然后给元素加上clip-path: url(#id)，其中id 为 clipPath 标签的 id。

推荐网站：svg路径生成，可通过自行拖拽生成 svg 路径。用法如下：

<svg height="0" width="0"> 
    <defs> 
        <clipPath id="svgPath">
            <path id="heart" d="M 250 500 Q 50 250 200 350 Q 200 350 300 450 Q 300 150 350 350 C 400 400 400 150 450 450 C 500 450 600 400 600 250 A 50 50 0 1 1 250 500 Z" />
        </clipPath> 
    </defs> 
</svg>
<img class="clipImg" src="https://pic.qqtn.com/up/2019-9/15690311636958128.jpg" />

.clipImg{
    width: 800px;
    clip-path:url(#svgPath)
}

基本图形：inset

按矩形剪裁，语法 clip-path:inset(top,right,bottom,left);

clip-path: inset(10% 10% 10% 10%);

insert 可实现的动画—— loading 加载中

不知道你有没有看到过这样的 loading 效果，在没了解 clip-path 之前，可能会让 U 同学来个动图，然后来实现这样的效果，但是接触到 clip-path 以后，只要脑洞够大，很多效果可以利用纯 css 去实现。 实现思路：

• 利用 clip-path 对边框进行裁剪
• 流动感通过裁剪位置随机来实现
• 渐变颜色动画则是利 filter: hue-rotate(); 属性值参考文章 来实现。

/*主要逻辑代码示例：*/
.border {
    border: 2px solid;
    border-image: linear-gradient(45deg, rgb(184, 159, 218), rgb(15, 48, 194)) 1;
    clip-path: inset(0 96% 0 0);
    animation: clipPath 1s infinite linear;
 }
 @keyframes clipPath {
    0%{
        clip-path: inset(0 0 96% 0);
        filter: hue-rotate(0deg);
    }
    25% {
        clip-path: inset(0 96% 0 0);
    }
    50% {
        clip-path: inset(96% 0 0 0);
        filter: hue-rotate(360deg);
    }
    75% {
        clip-path: inset(0 0 0 96%);
    }
    100% {
        clip-path: inset(0 0 96% 0);
        filter: hue-rotate(0deg);
    }
}

<div class="border">loading...</div>

基本图形：circle

按圆形剪裁，语法 clip-path:circle(50% at 50% 50%），at 前的50%代表半径为50% ， 后面的 50% 50% 代表圆心的位置。

基本图形：ellipse

按椭圆剪裁，语法clip-path: ellipse(50px 60px at 0 10% 20%); at 前参数为圆心位置，at后面参数为椭圆半径。椭圆就是基于圆形变化而来，参数含义结构都是类似的，只是半径不是一个值。

基本图形：polygon

按多边形剪裁，语法 clip-path: polygon(30% 50%，20% 10% ，20% 10%),每个具体的点位之间用『逗号』分割，每个具体的点位由（x y）组成；点位个数不限。以三角形为例说明具体数值含义：

也正是因为 polygon 点位数不限的灵活性，可实现多种形状的剪裁，例如五角星，多边形等。

/*五角星*/
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
/*五边形*/
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

具体数值可不用自己计算，推荐网站 可以快速切出一些基本的图形，并附上具体数值。 在项目中，经常有类似导航折叠功能的按钮，学以致用，就不需要在用切图来实现啦~

.btn {
    width: 30px;
    height: 120px;
    background-color: #ddd;
    clip-path: polygon(100% 0, 100% 100%, 0 80%, 0 20%);

    display: flex;
    justify-content: center;
    align-items: center;
}
.icon {
    width: 10px;
    height: 15px;
    background-color: rgb(180, 178, 178);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

兼容性

# 一些好看的实现网站推荐 发现一个纯 `clip-path` 实现的一个比较炫酷的网站，利用三角形拼接多种生物形状 [http://species-in-pieces.com/](http://species-in-pieces.com/) # 参考文章 [https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path)

segmentfault.com/a/119000002…

juejin.cn/post/708897…