【CSS】三角形实现的方式

只要前端入了门的小伙伴们想必大家一定见过这种组件：

element UI的 timepicke r组件

上面画圈圈的部分有个三角形，一般这种popup或者tooltip都会存在这么一个小三角形，下面来介绍两种实现方式

方案一：border

这种三角形常见的方式是通过 border属性来实现。由于border有上下左右四个边，像上图我们可以：

.arrow{
    height: 0px;
    width: 0px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
}

填充个#000的背景色，等腰三角形

根据各个边框宽度的不同可以实现不同的三角形，

.arrow{
    height: 0px;
    width: 0px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    border-width:0px 10px 15px 10px
}

假装自己是个全等三角形

.arrow{
  ....
  border-width: 0px 10px 10px 0px
  ...
}

直角三角形

并且一般我们写这种没有业务含义的装饰时推荐使用:after、:before 伪类来实现，使dom保持整洁。

.arrow:after{
    content: " ";
    border: 10px solid transparent;
    border-bottom-color: #fff;
    border-width: 0px 10px 15px 10px;
}

方案二：clip-path

当然除了使用border来实现，我们也可以使用clip-path来实现；

简单介绍：

clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。戳我了解

我们可以：

  clip-path: polygon(50% 0px, 100% 50% , 0px 50%)

如图，三角形对图片进行了遮挡

上面polygon中的参数是各个点的坐标（x轴坐标，y轴坐标），

image.png

以元素的Content+Padding的宽高作为百分比的基准，左上角作为坐标原点按点连线，图形出现在第四象限里；

当然我们不止可以用它来画三角形，其他任何的图形都可以拿它来实现。不知道大家用没用过ps，这个属性和ps中的‘钢笔’工具很相似。

clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%) clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

我们也可以通过使用path，将svg路径传入：

clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

使用svg路径

总结

综上所述，感觉这个clip-path功能很强大，能绘制出很多不同的形状。
但是但是但是！！！
border属性兼容性极好基本不存在问题；clip-path属性兼容性就差很多，如果是内部使用的B端项目还是很推荐的。还有其他常见的实现方式评论区见~~
另附上caniuse：

border clip-path