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

html-css017

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不可能做成三角形的，不过你可以用热点链接来解决，热点链接可以是不规则多边形的。<img src="images/banner.jpg" usemap="#Map" border="0" /><map name="Map" id="Map"> <area shape="poly" coords="1002,230,961,164,926,234" href="#" /></map>上面的数字代表三角形三个坐标。

1、圆形

#circle {    width: 100px    height: 100px    background: red    -moz-border-radius: 50px    -webkit-border-radius: 50px    border-radius: 50px

}

2、椭圆

#oval {    width: 200px    height: 100px    background: red    -moz-border-radius: 100px / 50px    -webkit-border-radius: 100px / 50px    border-radius: 100px / 50px

}

3、等边三角

#triangle-up {    width: 0    height: 0    border-left: 50px solid transparent    border-right: 50px solid transparent    border-bottom: 100px solid red

}

4、直角三角

#triangle-topleft {    width: 0    height: 0    border-top: 100px solid red 

    border-right: 100px solid transparent          

}

5、平行四边形

#parallelogram {    width: 150px    height: 100px    margin-left:20px    -webkit-transform: skew(20deg)       -moz-transform: skew(20deg)         -o-transform: skew(20deg)    background: red

}