JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<div class="masked"></div>

SCSS

$p1 : 240px;
$p2x : 160px;
$p2y : 90px;
$p3: 80px;

.masked {
  clip-path: polygon(0 100%, 0 0, calc(100% - #{$p1}) 0, calc(100% - #{$p2x}) #{$p2y}, calc(100% - #{$p3}) 0, 100% 0, 100% 100%, #{$p1} 100%, #{$p2x} calc(100% - #{$p2y}), #{$p3} 100%);
  background: url(https://source.unsplash.com/random/800x600) no-repeat 50% 50% /cover;
  min-height: 80vh;
  margin-top: 10vh;
  border: 1px solid rgba(255,255,255,.1);
}
body {
  background-color: #424242;
  margin: 0;
}