<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 {
  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%);
  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");
}    

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.