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)

}

<!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>

这样可以吗