JSFiddle - React, Tailwind, and code Playground

HTML

<div id="stage">
    <div id="trapezoid"></div><br/>
    <div id="trapezoid"></div><br/>
<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 0.5s;
    -o-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;

}

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

}