JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trapezoid"></div>
<div id="parallelogram"></div>

CSS

#trapezoid {
    height: 0;
    width: 100px;
    margin: 0 0 10px 0;
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

#parallelogram {
    width: 150px;
    height: 100px;
    margin: 0 0 0 20px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}