<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.