优雅的实现 UI 的多边形

今天阅读 Team CSS-Tricks 的订阅邮件，发现一遍文章 Using “box shadows” and clip-path together，恰好最近的小程序项目上有个相似的 UI 设计，学习并实践了一下，非常方便。

需求

一个相似 tag 的样式，个人实现是使用伪元素 after:

div {
    // ...
    &:after {
        position: absolute;
        top: 0;
        right: -20px;
        transform: rotate(45deg);
        content: ' ';
        width: 0;
        height: 0;
        border: 20px solid @white;
     }
}
复制代码

而使用 clip-path，只须要一行代码就搞定：

div {
   //...
   clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}
复制代码

详解

clip-path 属性实现了一个显示剪裁区域的功能。

兼容性

clip-path

polygon

如何剪裁

polygon 它以盒模型的左下角为坐标原点，你定义须要连线的点坐标便可：

如盒模型为 100px 100px，我定义了 5 个点，那么最终的效果就是依次连线 1～5，裁剪这个封闭区域，而 2-3-4 这个三角形就不显示了。

div {
    clip-path: polygon(0 0, 100px 0, 50px 50px, 100px 100px, 0 100px);
    // clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%);
}


复制代码

NOTE: 参数值能够为百分比，会以盒模型的宽高为基准计算。