优雅的实现 UI 的多边形

2019-04-23 149 阅读1分钟

今天阅读 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: 参数值可以为百分比，会以盒模型的宽高为基准计算。