JSFiddle - React, Tailwind, and code Playground

by Pushpendra Hirwani

HTML

<div id="trapezoid">
 <p>
 fdfd
 </p>
</div>

CSS

#trapezoid {
    border-left: 25px solid transparent;
    border-radius: 10px;
    border-right: 25px solid transparent;
    border-top: 100px solid rgba(114, 230, 245, 0.3);
    width: 100px;
    position: relative;
}

p{
      top: 0;
    position: absolute;
    left: 0;
    margin-top: -90px;
    margin-left: -20px;
}