<div class="clip clip-path">
<div class="item item1"></div>
</div>
.clip {
width: 100%;
min-height: 150px;
margin: 20px 0;
border-bottom: 1px solid #ccc;
}
.clip .item {
display: inline-block;
width: 150px;
height: 150px;
background: #ccc;
}
.clip-path .item1 {
clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.