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

html-css016

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>上面的数字代表三角形三个坐标。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>五边形</title>

<style type="text/css">

#triangle-left { 

width: 0 

height: 0 

border-top: 50px solid transparent 

border-right: 50px solid red 

border-bottom: 50px solid transparent 

float: left

} 

#left{

width: 200px

height: 100px

background: red

margin-left: 50px

}

</style>

</head>

<body>

<div id="triangle-left"></div>

<div id='left'></div>

</body>

</html>

这样可以吗