A clip path that can be animated
Live demo
Caveat and fallback
CaveatTwo shapes interpolate only when their command lists line up one for one, the same commands in the same order; swap a line for a curve in the second keyframe and the browser gives up and cuts between them. Percentages resolve against the reference box, so a curve drawn for a wide card flattens out in a narrow one unless some of the coordinates are fixed lengths.
FallbackAn unsupported shape() makes the declaration invalid, so the element ships unclipped as a plain rectangle. Harmless where the clip is decorative, less so where it was hiding something, and @supports (clip-path: shape(from 0 0)) is the honest guard. path() still works and still only speaks in user units, which is precisely what shape() was added to fix.
Source code
<div class="wave"></div>
.wave {
clip-path: shape(from 0 0,
line to 100% 0, line to 100% 62%,
curve to 0 62% with 50% 104%, close);
}
/* same commands, or it cannot interpolate */Published