JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="leftedge"></div>
<div id="rotated"></div>
<div id="rightedge"></div>

CSS

#rotated {
    width: 200px;
    height: 300px;
    transform: perspective(250px) rotateY(10deg);
    background: rgba(255,0,0,0.5);
    position: absolute;
    top: 50px;
    left: 50px;
}

#leftedge {
    position: absolute;
    width: 10px;
    height: 322px;
    background: rgba(0,255,0,0.5);
    top: 39px;
    left: 34px;
}

#rightedge {
    position: absolute;
    width: 10px;
    height: 280px;
    background: rgba(0,0,255,0.5);
    top: 60px;
    left: 242.5px;
}