JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="img"></div>
<div class="img"></div>

CSS

div.img {
  background: url(http://picsum.photos/1920/1080) no-repeat;
  background-size: cover;
  background-position: center;
  width: 500px;
  height: 300px;
  position: absolute;
}
div.img:nth-child(1){
  -webkit-clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%);
  clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%);
}
div.img:nth-child(2){
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%);
}