读者可能在一些网站中看到过下面这种效果

这种看起来非常炫酷的效果其实就是用裁剪来做的。

这个裁剪可以把一个元素裁剪成我们喜欢的形状，这是不是和蒙版很像，蒙版也是，添加 mask 蒙版后，保留有颜色的区域，裁掉透明的区域，但是蒙版毕竟只是蒙版，主要是用来抠图的，例如 b 站的遮挡字幕就是用 mask 蒙版实现的，并且 mask 蒙版需要额外一张图片，如果没有这张蒙版图片我们也很难裁剪成复杂的形状，但是 clip-path 就不一样了，我们可以把一个元素裁剪成很复杂的形状。

一般情况下，mask 更常用在需要使用透明度来控制显示效果的场景下，而 clip-path 则是在高精度的矢量裁剪上很有优势。

clip-path 的使用方式很简单，直接给元素添加上这个属性即可。

clip-path 可以使用一些函数，用来生成一些基本图形

• 矩形：clip-path: inset(top right bottom left)
• 圆形：clip-path: circle(半径 at x y);
• 椭圆：clip-path: ellipse(水平半径 垂直半径 at x y);
• 多边形：clip-path: ploygon(x1 y1, x2 y2, x3 y3, ...)

注意，矩形的四个参数为裁剪区域与上下左右四条边的距离，如下所示： 

除此之外，clip-path 还支持 SVG 路径，直接使用 path 函数即可，包括 SVG 标签也可以，传入一个 url(#svg) 即可

注意，inset 这个函数参数与参数之间不能用逗号隔开

我们可以使用 Clippy — CSS clip-path maker 来帮助我们生成一个多边形（墙）