JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

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

CSS

#stage {
margin-top: 200px;
    position: relative;
}

#trapezoid {
    position: absolute;
    bottom: 0;
    border: solid 1px #fff;
    border-bottom: solid 200px #c00;
    width: 200px;
        -webkit-transition: all ease 1s;

}

#stage:hover #trapezoid {
  border: solid 50px #fff;  
  border-bottom: solid 20px #f11;
  width: 100px;

}