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)

}

百度:css3 变形(低版本ie和少部分浏览器不支持)

低版本ie的实现:

先把图片在ps里面拉斜做影子后存为:png24+背景透明格式,然后网页里面用cssz-index控制层级上下关系,并用定位摆放到合适的位置。另外你还要修正一下ie6的png24背景不透明的问题。

然后,你给那三个猫咪图片每张一个id:

<img src="aaa.jpg" id="cat1" />

<img src="bbb.jpg" id="cat2" />

<img src="ccc.jpg" id="cat3" />

#cat1,#cat2,#cat3{position:absolute}/*绝对定位*/

#cat1{

left:300pxtop:80px

z-index:10

}

#cat2{

left:50pxtop:320px

z-index:9

}

#cat3{

left:300pxtop:80px

z-index:8

}