阅读 9

优雅的实现 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: 参数值可以为百分比,会以盒模型的宽高为基准计算。

关注下面的标签,发现更多相似文章
评论