JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin:30px">
    <div class="trapezoid">
    </div>
</div>

CSS

.trapezoid{
    vertical-align: middle;
    border-bottom: 120px solid red;
    border-left: 200px solid transparent;
    border-top-left-radius:30px;
    height: 0;
    width: 150px;}

/* ---------- */

.trapezoid {
    position:relative;
}
.trapezoid:after {
    content:' ';
    left:-14px;
    top:-10px;
    position:absolute;
    background:red;
    border-radius:40px 0 0 0;
    width:164px;
    height:40px;
    display:block;
}