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就是用图片来截取成不规则图片,
哈哈 ,目前理解就这么多