css3 clip-path
<html>
<head>
<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>
</head>
<body>
<div class="clip-block">
<figure class="clip-wrap">
<img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-css" class="clip-css" width="140" height="140">
<figcaption>Clip-path with CSS</figcaption>
</figure>
<figure class="clip-wrap">
<img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-svg-inline" class="clip-svg-inline" width="140" height="140">
<figcaption>Clip-path with inline SVG</figcaption>
</figure>
<figure class="clip-wrap">
<img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-svg-external" class="clip-svg-external" width="140" height="140">
<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>
</html>
