JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div id='wrap'>
    <div class='shadow'></div>
</div>

CSS

#wrap{
    position:relative;
    width:200px;
    height:200px;
    background:#8e4597;
    overflow:hidden;
}
.shadow{
    width:2000px;
    height:70px;
    background:#de5f6a;
    position:absolute;
    transform:rotateZ(45deg);
    top:50px;
    left:100px;
    transform-origin:left top;
}
.shadow:before{
    content:' ';
    display:block;
    width:50px;
    height:50px;
    background:#fff;
    position:absolute;
    transform:rotateZ(-45deg);
    transform-origin:left top;
    left:-35px;
    top:35px;
}