<svg class="svg">
    <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0,0 H1 C1,0,1,0.419,1,0.44 C1,0.462,0.971,0.513,0.971,0.522 C0.971,0.532,1,0.581,1,0.603 C1,0.626,1,1,1,1 H0 V0.6 C0,0.582,0.029,0.528,0.029,0.519 C0.029,0.512,0,0.456,0,0.439 V0"></path></clipPath>
    </svg>
<div class="blocks">
  <div class="block block--1"></div>
  <div class="block block--2"></div>
</div>
svg {
  position: absolute;
  opacity: 0;
  z-index: -100;
}

.blocks {
  display: flex;
  justify-content: center;
}

.block {
  width: 300px;
  background: purple;
  margin-left: 20px;
  margin-right: 20px;
  clip-path: url("#my-clip-path");
}

.block--1 {
  height: 300px;
 
}

.block--2 {
  height: 600px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.