<div class="block"></div>
.block {
margin: 200px 0 0 50px;
}
.block::after {
content: '';
height: 200px;
width: 200px;
display: block;
position: absolute;
transform: skewY(-8deg);
transform-origin: 100% 0 0;
border: 0 solid transparent;
border-radius: 30px 30px 0 0;
top:21px;
z-index: 12;
background: white;
clip-path: polygon(-20% -20%, 120% -20%, 120% 60%, -20% 40.29%);
box-shadow: 0 0 20px 0;
}
.block::before {
content: '';
height: 300px;
width: 200px;
display: block;
position: absolute;
border: 0 solid transparent;
border-radius: 0 0 30px 30px;
top: -14.55px;
z-index: 12;
background: white;
clip-path: polygon(-100% 50%, 200% 50%, 200% 200%, -100% 200%);
box-shadow: 0 0 20px 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.