clip-path

Posted 2020-07-30

html代码：

<div>
<img src="BC0C62C1B1962A8A.jpg">
</div>

 

 

css代码：

img{
clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
-webkit-clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
-o-clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
-moz-clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
-ms-clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}

 

ps:这个坐标是从左到右，从上到下的顶点坐标，按照顶点坐标然后连线成一个几何图形

　　我这个是一个四个顶点，所以是四边形，顶点可以有很多个，按照自己的要求，这个代码就是把这个图片截取成一个菱形，不行你可以试试

　　我理解的clip-path就是用图片来截取成不规则图片，

　　哈哈 ，目前理解就这么多