JSFiddle - React, Tailwind, and code Playground

by Nymos

HTML

<div id="divr">Right</div>
<div id="divl">Left</div>
<div id="divt">Top</div>

CSS

div
{
position:relative;
width:100px;
height:100px;
background-color:red;
border:1px solid black;
 
}
 
div#divr
{
position: absolute; top: 200px; left: 200px;
       
transform:skewY(-30deg);
-ms-transform:skewY(-30deg); /* IE 9 */
-moz-transform:skewY(-30deg); /* Firefox */
-webkit-transform:skewY(-30deg); /* Safari and Chrome */
-o-transform:skewY(-30deg); /* Opera */
}
       
div#divl
{
position: absolute; top: 200px; left: 100px;
       
transform:skewY(30deg);
-ms-transform:skewY(30deg); /* IE 9 */
-moz-transform:skewY(30deg); /* Firefox */
-webkit-transform:skewY(30deg); /* Safari and Chrome */
-o-transform:skewY(30deg); /* Opera */
}
       
div#divt
{
position: absolute; top: 120px; left: 150px;
       
transform:skew(60deg,-30deg) scale(1,0.58);
-ms-transform:skew(60deg,-30deg) scale(1,0.58); /* IE 9 */
-moz-transform:skew(60deg,-30deg) scale(1,0.58); /* Firefox */
-webkit-transform:skew(60deg,-30deg) scale(1,0.58); /* Safari and Chrome */
-o-transform:skew(60deg,-30deg) scale(1,0.58); /* Opera */
}