<div class="shape"></div>
<div class="shape"></div>
:nth-child(1 of .shape) {
clip-path: shape(from 0 0,
arc to 100% 100% of 100% cw,
line to 0 100%)
}
:nth-child(2 of .shape) {
clip-path: shape(from 0 0,
curve to 100% 100% with 100% 0,
line to 0 100%)
}
.shape {
width: 200px;
aspect-ratio: 1;
display: inline-block;
background: red;
margin: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.