css3中clip-path的属性语法介绍（裁剪范围计算）

clip-path属性用于裁剪CSS的形状或元素。使用inset()函数时，你提到的四个参数（上，右，下，左）确实定义了一个矩形的边界，矩形以外的部分将被裁剪。这四个参数的值的单位可以是像素（px）或百分比（%），但使用像素单位时，确实可能会造成页面的重绘。这主要是因为在某些情况下，像素单位可能会导致浏览器的重排或重绘，从而影响性能。

clip-path示例代码介绍：

clip-path: inset(10px 20px 25px 30px);

clip-path的属性语法讲解

-webkit-clip-path这里加-webkit- 是为了兼容老版本的chrome和safari；

polygon 这个表示剪切路径是”多边形“，那么后边就是多边形各顶点的坐标；

50% 0%, 0 100%, 100% 100%这些就是顶点坐标了：

以逗号分隔的是3个顶点；每个顶点的x,y坐标以空格分隔，以左上角为起点；坐标可以用px像素，也可以用%百分比。

裁切的路径，除了polygon以外，还有circle圆形，inset矩形，ellipse椭圆等，我们在后面例子中会有示范。

clip-path三角形

.div{ -webkit-clip-path: polygon(50% 0%, 0 100%, 100% 100%);}

clip-path菱形

.div{-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}

clip-path梯形

.div{-webkit-clip-path: polygon(20% 0%,80% 0%, 100% 100%, 0% 100%);}

clip-path沙漏

.div{-webkit-clip-path: polygon(0% 0%,100% 0%, 0 100%, 100% 100%);}

clip-path平行

.div{-webkit-clip-path: polygon(30% 0%,100% 0%, 70% 100%, 0% 100%);}

clip-path五边形

.div{-webkit-clip-path: polygon(50% 0%, 100% 36%, 80% 100%, 20% 100%, 0% 36%);}

clip-path五角星

.div{-webkit-clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}

clip-path六边形

.div{-webkit-clip-path: polygon(50% 0%, 100% 24%, 100% 76%, 50% 100%, 0% 76%, 0% 24%);}

clip-path六角星

.div{-webkit-clip-path: polygon( 50% 0%, 66% 24%,100% 24%, 82% 50%,100% 76%,66% 76%, 50% 100%, 34% 76%,0% 76%,18% 50%, 0% 24%,34% 24%);}

clip-path箭头

.div{-webkit-clip-path: polygon(0% 20%,66% 20%,100% 50%,66% 80%,0 80%);}

clip-path箭头2

.div{-webkit-clip-path: polygon(0% 33%,66% 33%,66% 0%,100% 50%,66% 100%,66% 66%,0 66%);}

clip-path半圆

.div{-webkit-clip-path:circle(50% at 50% 0%);}

clip-path椭圆

.div{-webkit-clip-path:ellipse(50% 25% at 50% 50%);}

clip-path圆角

.div{-webkit-clip-path:inset(0 round 20%);}

clip-path树叶

.div{-webkit-clip-path:inset(0 round 0 100% 0 100%);}

clip-path水滴

.div{-webkit-clip-path:inset(0 round 0 100% 100% 100%);}