什么是clip-path

直译就是剪裁路径的意思，使用svg或者形状定义一个html元素的可见区域的方法。

演示

截图来自于clip-path在线神器- 网站。

基础用法

使用之前需要注意得几点

1 使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续线段，若线段彼此有交集，裁剪区域就会相减得情况发生，当然如果你特意需要这样的效果除外

2 如果绘制时采用比例的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想象的就会有差距，使用像素绘制就不会有这样的现象了。

我们看到 我们是从这四个点开始剪裁得分别对应的是

x1,y1 = 50% 0%

x2,y2 = 0% 50%

x3,y3 = 50% 100%

x4,y4 = 100% 50%

这个图形的css就是clip-path:polygon( 50% 0% , 0% 50% , 50% 100% , 100% 50%)

让我们看下完整的图形

结语

当然这只是clip-path中多边形的一种用法，他还包括

inset() -> 矩形

circle() -> 圆形

ellipse() -> 椭圆形

clip-path的作用不仅仅是如我上面介绍的那般简单，它还有很多奇妙的用处，尤其配合动画一起使用，感兴趣的同学可以自己慢慢深入。

希望大家可以关注我，一起探索前端的知识。