JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box box1">

</div>

<div class="box box2">

</div>

CSS

.box::after {
   position: absolute;
   left: 0;
   top: 50%;
   right: 0;
   content: '';
   border: 1px solid #ccc;
   transform: matrix(-0.42, 0.91, -0.81, -0.59, 0, 0);
   width: 100%;
 }

 .box {
   position: relative;
   overflow: hidden;
 }

 .box1 {
   width: 150px;
   height: 100px;
   background: green;
 }

 .box2 {
   width: 250px;
   height: 200px;
   background: red;
 }