代码改变世界

clip-path

2016-06-27 10:49  改吧  阅读(312)  评论(0编辑  收藏  举报

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就是用图片来截取成不规则图片,

  哈哈 ,目前理解就这么多