<div class="box"></div>
.box {
--h: 200px; /* element height */
--s: 90px; /* slant size */
--r: 20px; /* radius */
height: var(--h);
background: linear-gradient(60deg,#C02942,#542437);
border-radius: var(--r) 0 0 var(--r);
--_a: atan2(var(--s),var(--h));
clip-path:
shape(from 0 0,
line to calc(100% - var(--s) - var(--r)) 0,
curve by calc(var(--r)*(1 + sin(var(--_a))))
calc(var(--r)*cos(var(--_a)))
with var(--r) 0,
line to calc(100% - var(--r)*sin(var(--_a)))
calc(100% - var(--r)*cos(var(--_a))),
curve to calc(100% - var(--r)) 100%
with 100% 100%,
line to 0 100%
);
}
:nth-child(2 of .box) {
margin: 20px 50px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.