JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="div1"></div>
<div class="div2"></div>

CSS

div {
    background: #D25A1E;
    min-height: 100px;
    width: calc(50% - 25px);
    position: relative;
}
.div1 {
    float: left;
}
.div2 {
    float: right;
}
div:after {
    position: absolute;
    top: 0px;
    content:'';
    z-index: -1;
    height: 100%;
    width: 50%;
    background: #D25A1E;
}
.div1:after {
    right: 0;
    transform-origin: bottom right;
    transform: skewX(-20deg);
}
.div2:after {
    left: 0;
    transform-origin: top left;
    transform: skewX(-20deg);
}