JSFiddle - React, Tailwind, and code Playground

by Jeremy Whiteford

HTML

<svg class="svg-defs">
  <defs>
    <clipPath id="clipping">
      <polygon points="0,50 700,0 700,300 0,250" />
    </clipPath>   
   </defs>
</svg>

<div class="wrapper">
 <div class="item--svg-clip-path-svg">
    <div class="demo">
      <svg width="1000" height="1000">
        <image xlink:href="https://placeimg.com/1000/1000/animals" width="1000" height="1000" />
      </svg>
    </div>  
  </div>
</div>

CSS

.wrapper {
  max-width: 10em;
  margin: 0;
  padding: 2rem 0;
}

.item--svg-clip-path-svg image,
.item--svg-clip-path-html img {
  clip-path: url(#clipping);
  border: 2px solid red;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}