JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0% 75%)

<div class="element"></div>

<svg>
  <defs>
    <clipPath id="video-clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 1 0, 1 0.75, 0.5 1, 0 0.75" />
    </clipPath>
  </defs>
  <image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-huitzi.png" height="100%" width="100%" clip-path="url(#video-clip-shape)"/>    
</svg>