JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div>
  <div class="left">
  </div>
  
  <div class="right">
  </div>  
</div>

CSS

div {
  height: 400px;
  overflow-x:hidden;
  background:#000;
  position:relative;
}

.left , .right{
  position:absolute;
  bottom:0;
  height:150px;
  overflow:hidden;
}

.left {
  width: 30vw;
  left:0;
}

.right {
  width: 70vw;
  right:0;
}

.left:after {
  content:'';
  position:absolute;
  bottom:0;
  top:0;
  left:0;
  right:0;
  background:#ff0000;
  transform:skew(50deg);
}