<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.