JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="example">Element</div>

CSS

#example{
    width:200px;
    height:200px;
    border:1px solid #000;
    margin:200px auto;
    -webkit-transform:  skewY(10deg);
    position:relative;
    
    text-align: center;
    line-height: 200px;
    font-family: arial;
    font-size: 24px;
}

#example:before{
    content:':before';
    width:200px;
    height:200px;
    border:1px solid red;
    display:block;
    position:absolute;
    top:100px;
    left:-100px;
    background:rgba(255,255,255,0.8)
}

#example:after{
    content:':after';
    width:200px;
    height:200px;
    border:1px solid blue;
    display:block;
    position:absolute;
    top:200px;
    left:-200px;
    background:rgba(255,255,255,0.8)
}