欢迎大家在这里学习CSSclippath使用!这里是我们给大家整理出来的精彩内容。我相信，这些问题也肯定是很多朋友在关心的，所以我就给大家谈谈这个!

clip-path 是工作草案的一部分，它是一个通过屏蔽和裁减来隐藏元素的一部分的工具。尽管clip-path没有被主流的浏览器支持(包括IE和Firefox)，但在webkit浏览器中，它仍然是一个实现时尚效果的小工具。

注意，在现代浏览器中需要使用-webkit-前缀。

clip-path 简单的工作原理是提供一系列的X和Y值来创建路径。当使用这些值创建一条完整路径时，就会把图像按照路径内部的尺寸进行裁剪。

利用clip-path，我们可以创建圆形、椭圆和多边形等不同的形状，创造力是唯一的限制。

一个简单的三角形裁减

View the code on codepen

对元素简单地运用clip-path就能实现上面的效果：

CSS Code复制内容到剪贴板

.clipClass {

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

}

逐步分析

很像定位属性，我们需要考虑X值和Y值。X:0和Y:0表示从元素的左上角开始，并从左上角开始移动。X:100%指的是元素右边，Y:100%指的是元素底部。

对于上面创建的路径，实际是创建了如下的点：

CSS Code复制内容到剪贴板

x: 0, y:100%

x: 50%, y: 0

x: 100%, y: 100%

这个简单路径开始于左下角，水平移动50%，并到达顶部位置，然后又水平移动到100%的位置，垂直向下回到底部，到达第三个坐标点。三角形就出来了。

好了，CSSclippath使用内容就给大家介绍到这里了。希望大家继续关注我们的网站!

相关推荐：

CSSRGB颜色介绍