JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    position:relative;
    width:200px;
    height:100px;
    margin:15px;
    background: rgba(255, 0, 0, 0.95);
}
div::after {
    content:"";
    position:absolute;
    top: 50px;
    width: 200px;
    height: 80px;
    -webkit-transform: skewY(-15deg);
    -moz-transform: skewY(-15deg);
    -ms-transform: skewY(-15deg);
    transform: skewY(-15deg);
    z-index: -1;
    background: #00f;
}