<meta charset= "UTF-8" >
<title>clip-path</title>
<style>
Body {
font-family: "Roboto condensed", Sans-serif;
}
. clip-block {
Text-align:center;
}
. clip-wrap {
Display:inline-block;
Vertical-align:top;
padding:0;
Margin:0 20px;
}
. clip-svg {
width:0;
height:0;
}
. clip-css {
/*-webkit-clip-path:polygon (0 100%, 0 0, 100% 0, 80% 100%); * *
-webkit-clip-path:polygon (0% 20%,80% 0%,80% 100%,20% 100%);
/*-webkit-clip-path:polygon (25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); * *
Clip-path:polygon (0 100%, 0 0, 100% 0, 80% 100%);
}
. clip-svg-inline {
-webkit-clip-path:url ("#clip-polygon");
Clip-path:url ("#clip-polygon");
}
. clip-svg-external {
-webkit-clip-path:url ("Http://karenmenezes.com/shapes-polygon/clip.svg#clip-polygon-ext");
Clip-path:url ("Http://karenmenezes.com/shapes-polygon/clip.svg#clip-polygon-ext");
}
</style>
<body>
<div class= "Clip-block" >
<figure class= "Clip-wrap" >
<figcaption>clip-path with css</figcaption>
</figure>
<figure class= "Clip-wrap" >
<figcaption>clip-path with inline svg</figcaption>
</figure>
<figure class= "Clip-wrap" >
<figcaption>clip-path with external svg</figcaption>
</figure>
</div> <!--/clip-block--
<svg class= "Clip-svg" >
<defs>
<clippath id= "Clip-polygon" clippathunits= "Objectboundingbox" >
<polygon points= "0 1, 0 0, 1 0, 0.8 1"/>
</clipPath>
</defs>
</svg>
</body>
CSS3 Clip-path