clip-path介绍：

clip-path 直译过来就是裁剪路径，使用SVG或形状定义一个HTML元素的可见区域的方法。

clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

效果演示

兼容性

clip-path目前兼容性较差，IE和Edge直接不支持。可使用谷歌浏览器和火狐浏览器进行查看

语法详解和示例

inset(): 定义一个矩形 。注意，定义矩形不是rect，而是inset。

//示例

clip-path:inset(2em3em2em1emround2em);

circle(): 定义一个圆 。

//示例

clip-path:circle(30%at150px120px);

ellipse(): 定义一个椭圆 。

//示例

clip-path:ellipse(45% 30%at50% 50%);

polygon(): 定义一个多边形 。

//示例

clip-path:polygon(50% 0,100% 50%,0 100%);

最后贴上彩虹特效的代码

总结

在clip-path之前，我们可以利用盒模型，利用border-radius,border，transform，box-shadow等来创建诸如矩形，圆形，椭圆，三角形等一些简单的形状，clip-path为我们提供了多边形的创建方案，尽管它现在的支持性，兼容性还不是很好，但我们完全可以在一些特定的场景下使用它来代替图片了。当然，clip-path的作用不仅仅是如我上面介绍的那般简单，她还有很多奇妙的用处，尤其是配合动画一起使用。