<div class="wave"></div>
<div class="wave"></div>
.wave {
--size: 50px;
--m: 0.5;
--p: calc(var(--m)*var(--size));
--R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));
height: 200px;
margin: 10px 0;
mask:
radial-gradient(var(--R) at left 50% var(--d,top) calc(var(--size) + var(--p)),#000 99%,#0000 101%)
calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
radial-gradient(var(--R) at left 50% var(--d,top) calc(-1*var(--p)),#0000 99%,#000 101%)
left 50% var(--d,top) var(--size)/calc(4*var(--size)) 100% repeat-x;
background:linear-gradient(90deg,red,blue);
}
.wave + .wave {
--d: bottom;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.