CSS样式的clip-path来源于SVG元素，它们的本质都是剪切每个人都知道剪切，那么clip-path实现的剪切有什么特别之处呢？它的剪切元素可以是任意对象你整个HTML页面也好，一个form表单也好，图片也好，一切都可以变成一块一块的在看效果之前先检查一个这个属性的浏览器兼容情况，如下图：IE是完全不支持，尽量使用webkit内核，需要加上内核前缀-webkit- 好了，接下来就是栗子了，整片文章多图~下面是一个资源管理器的静态页面让我们对其简单的剪切下变成了一个三角形，简单的一句话代码-webkit-clip-path: polygon(0 0,750px 0,750px 500px);利用polygon多边形给出了三个点，画了一个三角形，也就是将整个图切割成了一个三角形给多了的点的话就可以生成各种形状，比如四边形，五角星，六边形等等……目前来说没有什么亮点，但是如果clip-path里面的数值变化可以触发transition的话那瞬间就不一样了所以关于clip-path的大部分动画都是这样的，我给出一个简单的例子本身效果是毫无卡顿感的，因为录制成gif希望文件较小所以帧间隔较大，显得比较卡由于clip-path剪切出来的部分和正常的DOM节点其实是一样一样的，那么很多关于DOM节点的操作也可以给它加上，比如……3D动画！之前的长方形变成了一个三角形，如果是由一个长方形变成多个三角形呢，然后他们进行3D变化了呢？下面是制作的一个简单的效果这里我进行了3D变化，随机动态的改变其rotateXYZ、translate3D的值，如果实现确定好的话可以实现一些折纸啊，折叠之类的效果，在这里我就不演示了，道理说道就好注意：经过clip-path剪切之后的元素，background-color和background-image同时使用会产生bug，会有边缘线产生，请单独使用它们！分享一个动画献给AlloyTeam，毕竟是在这里的第一篇文！动画前半部分和后半部分都是使用clip-path实现的由于动画时间较长，特地缩小了录制区域来避免文件过大，显得还是有点卡顿，真实情况下真的还好……最后提一下毕竟利用clip-path频繁操作DOM，简单一点的还好，如果是特别复杂，或者像我这个动画里面碎图的块再多一点，那么就会卡到你抓狂所以做动画还是Canvas大法好~那么下一篇文章确定了，还是动画，不过是Canvas相关结语：整篇文章代码很少（就是没有代码……），没有把某个效果具体从开始第一秒到最后一秒具体去实现，因为clip-path本身不难，也不算什么新东西~有哪些属性值，怎么使用，网上一搜一大堆，我这里就不罗列了啊~如果有什么疑问大家一起交流吼吼~