css3中使用clip-path将图片裁剪成不规则图形添加边框

html-css020

css3中使用clip-path将图片裁剪成不规则图形添加边框,第1张

img{

-webkit-clip-path: polygon(0 0,100% 0,100% 40px,145px 40px,130px 60px,115px 40px,0 40px,0 0)

clip-path: polygon(0 0,100% 0,100% 40px,145px 40px,130px 60px,115px 40px,0 40px,0 0)

}

首先你要知道要截取的图片在整张图片中的偏移量以及大小。然后：

<div style="width:wwwpxheight:hhhpxbackground:url(图片url) no-repeat -lllpx -tttpx"></div>

其中www是要截取的小图片的宽度，hhh则是高度；

lll是小图片的左边在大图片的偏移量，ttt则是上边的偏移量。

请注意负号不能省略！