← All elements
<div class="sd"><div class="top">Top section</div><div class="bot">Bottom section</div></div>About this layout
A smooth wavy divider between two sections, using a repeating radial-gradient mask and no SVG at all.
How it works
The lower section has a ::before strip along its top edge. That strip is the same colour as the section and is masked with a repeating radial-gradient, which cuts a row of round bites out of it. The result is a scalloped, wavy border between two blocks, made with no SVG and no images.
Ways to customise it
- Change the 40px mask width for wider or narrower waves.
- Edit the radius of 16px for deeper scallops.
- Change both section colours.
Good to know
Masks are supported in current browsers, and the -webkit- prefix is included for older Safari. It is decoration only, so no accessibility work is needed.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.