Design system

Section divider styles

20 ways to move from one section to the next. Every style is pure CSS or a tiny inline SVG, scales from phone to desktop and uses the Michael Sage palette (navy, mist, white, pink). Open “Copy CSS / SVG” under any demo to reuse it.

Rounded rise

The next section rises over the previous one with large rounded top corners (the reference style).

Section A · White

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 01 */
.dv-01 .dv-b{border-radius:var(--r) var(--r) 0 0;margin-top:calc(-1 * var(--r));z-index:2}

<!-- markup -->
<div class="dv-demo dv-01">
<div class="dv-s dv-a bg-white">
<span class="dv-tag">Section A · White</span>
</div>
<div class="dv-s dv-b bg-navy">
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Rounded drop

Inverse: the section above ends in rounded bottom corners that sit over the next section.

Section A · Navy

Section B · White

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 02 */
.dv-02 .dv-a{border-radius:0 0 var(--r) var(--r);margin-bottom:calc(-1 * var(--r));z-index:2}
.dv-02 .dv-b{padding-top:calc(var(--pad) + var(--r))}

<!-- markup -->
<div class="dv-demo dv-02">
<div class="dv-s dv-a bg-navy">
<span class="dv-tag">Section A · Navy</span>
</div>
<div class="dv-s dv-b bg-white">
<span class="dv-tag">Section B · White</span>
</div>
</div>

Floating card overlap

A rounded white card straddles the boundary with a soft shadow; great for stats or a CTA.

Section A · Navy

Floating card · 5.0 on Google · 25+ years

Section B · Mist

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 03 */
.dv-03 .dv-b{padding-top:0;flex-direction:column}
.dv-03 .dv-card{position:relative;z-index:3;margin-top:-64px;margin-bottom:24px;background:#fff;color:#1C244B;border-radius:24px;padding:24px 32px;box-shadow:0 24px 48px -18px rgb(28 36 75/.35);width:min(560px,100%);text-align:center;font-weight:700}

<!-- markup -->
<div class="dv-demo dv-03">
<div class="dv-s dv-a bg-navy">
<span class="dv-tag">Section A · Navy</span>
</div>
<div class="dv-s dv-b bg-mist">
<div class="dv-card">Floating card · 5.0 on Google · 25+ years</div>
<span class="dv-tag">Section B · Mist</span>
</div>
</div>

Corner sweep

One clean curve sweeps from the top-left corner down to the right edge.

Section A · White

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 04 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-04">
<div class="dv-s dv-a bg-white">
<span class="dv-tag">Section A · White</span>
</div>
<div class="dv-s dv-b bg-navy">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 120 L0 0 Q 220 120 1440 120 Z"/>
</svg>
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Dome arc

A single convex arc: the lower section bulges up into the one above.

Section A · Mist

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 05 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-05">
<div class="dv-s dv-a bg-mist">
<span class="dv-tag">Section A · Mist</span>
</div>
<div class="dv-s dv-b bg-navy">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 120 Q 720 -100 1440 120 Z"/>
</svg>
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Inverted arc (bowl)

A concave arc: high at the edges and dipping in the middle.

Section A · Navy

Section B · White

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 06 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-06">
<div class="dv-s dv-a bg-navy">
<span class="dv-tag">Section A · Navy</span>
</div>
<div class="dv-s dv-b bg-white">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 0 Q 720 200 1440 0 V120 H0 Z"/>
</svg>
<span class="dv-tag">Section B · White</span>
</div>
</div>

Wave

A gentle single wave; playful without being busy.

Section A · White

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 07 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-07">
<div class="dv-s dv-a bg-white">
<span class="dv-tag">Section A · White</span>
</div>
<div class="dv-s dv-b bg-navy">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 70 C 240 10 480 10 720 60 S 1200 120 1440 50 V120 H0 Z"/>
</svg>
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Layered waves

Three translucent waves stacked for depth.

Section A · Mist

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 08 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-08">
<div class="dv-s dv-a bg-mist">
<span class="dv-tag">Section A · Mist</span>
</div>
<div class="dv-s dv-b bg-navy">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 40 C 300 110 600 0 900 50 S 1300 90 1440 30 V120 H0 Z" opacity=".3"/>
<path d="M0 70 C 260 20 560 110 860 60 S 1260 20 1440 70 V120 H0 Z" opacity=".55"/>
<path d="M0 90 C 300 60 600 120 900 85 S 1280 60 1440 95 V120 H0 Z"/>
</svg>
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Tilt

A straight slanted edge (CSS clip-path, no SVG).

Section A · White

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 09 */
.dv-09 .dv-b{clip-path:polygon(0 var(--h),100% 0,100% 100%,0 100%);margin-top:calc(-1 * var(--h));padding-top:calc(var(--pad) + var(--h))}

<!-- markup -->
<div class="dv-demo dv-09">
<div class="dv-s dv-a bg-white">
<span class="dv-tag">Section A · White</span>
</div>
<div class="dv-s dv-b bg-navy">
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Accent diagonal

A slant with a thin pink accent stripe riding the edge.

Section A · White

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 10 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-10">
<div class="dv-s dv-a bg-white">
<span class="dv-tag">Section A · White</span>
</div>
<div class="dv-s dv-b bg-navy">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 104 L1440 0 V26 L0 120 Z" fill="#FF006E"/>
<path d="M0 120 L1440 26 V120 Z"/>
</svg>
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Arrow notch

The upper section points down into the next with a centered arrow.

Section A · Navy

Section B · Mist

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 11 */
.dv-11 .dv-a{z-index:2}
.dv-11 .dv-a:after{content:"";position:absolute;left:50%;top:calc(100% - 1px);transform:translateX(-50%);border-style:solid;border-color:var(--bg) transparent transparent;border-width:clamp(22px,3vw,36px) clamp(28px,4vw,48px) 0}

<!-- markup -->
<div class="dv-demo dv-11">
<div class="dv-s dv-a bg-navy">
<span class="dv-tag">Section A · Navy</span>
</div>
<div class="dv-s dv-b bg-mist">
<span class="dv-tag">Section B · Mist</span>
</div>
</div>

Zigzag

Sharp repeating teeth (pure CSS conic-gradient).

Section A · Navy

Section B · White

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 12 */
.dv-12 .dv-b:before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:18px;background:conic-gradient(from 135deg at 50% 0,var(--bg) 90deg,transparent 0) 0 0/36px 18px repeat-x}

<!-- markup -->
<div class="dv-demo dv-12">
<div class="dv-s dv-a bg-navy">
<span class="dv-tag">Section A · Navy</span>
</div>
<div class="dv-s dv-b bg-white">
<span class="dv-tag">Section B · White</span>
</div>
</div>

Scallop

Rounded scallops, like a bunting or tablecloth edge (CSS radial-gradient).

Section A · White

Section B · Pink

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 13 */
.dv-13 .dv-b:before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:18px;background:radial-gradient(circle at 50% 100%,var(--bg) 17.5px,transparent 18px) 0 0/36px 18px repeat-x}

<!-- markup -->
<div class="dv-demo dv-13">
<div class="dv-s dv-a bg-white">
<span class="dv-tag">Section A · White</span>
</div>
<div class="dv-s dv-b bg-pink">
<span class="dv-tag">Section B · Pink</span>
</div>
</div>

Torn paper

A jagged, hand-torn edge; informal and editorial.

Section A · Navy

Section B · White

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 14 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-14">
<div class="dv-s dv-a bg-navy">
<span class="dv-tag">Section A · Navy</span>
</div>
<div class="dv-s dv-b bg-white">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 120 V70 L60 52 L110 78 L170 40 L240 66 L300 30 L370 72 L430 48 L520 80 L590 38 L660 62 L740 34 L800 70 L880 44 L950 76 L1020 40 L1100 66 L1170 36 L1250 72 L1320 46 L1380 70 L1440 50 V120 Z"/>
</svg>
<span class="dv-tag">Section B · White</span>
</div>
</div>

Stepped

Hard-edged stairs climbing across the boundary.

Section A · Mist

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 15 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-15">
<div class="dv-s dv-a bg-mist">
<span class="dv-tag">Section A · Mist</span>
</div>
<div class="dv-s dv-b bg-navy">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 120 V96 H288 V72 H576 V48 H864 V24 H1152 V0 H1440 V120 Z"/>
</svg>
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Pill tab

A rounded tab rises from the center; a natural spot for a "scroll" cue.

Section A · Navy

Section B · White

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 16 */
.dv-16 .dv-b:before{content:"";position:absolute;left:50%;bottom:calc(100% - 1px);transform:translateX(-50%);width:clamp(140px,28%,260px);height:clamp(26px,3vw,40px);background:var(--bg);border-radius:999px 999px 0 0}
.dv-16 .dv-b:after{content:"";position:absolute;left:50%;top:-14px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#FF006E}

<!-- markup -->
<div class="dv-demo dv-16">
<div class="dv-s dv-a bg-navy">
<span class="dv-tag">Section A · Navy</span>
</div>
<div class="dv-s dv-b bg-white">
<span class="dv-tag">Section B · White</span>
</div>
</div>

Gradient fade

No hard edge: one color melts into the next.

Section A · White

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 17 */
.dv-17 .dv-b:before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(100px,12vw,170px);background:linear-gradient(to bottom,transparent,var(--bg))}

<!-- markup -->
<div class="dv-demo dv-17">
<div class="dv-s dv-a bg-white">
<span class="dv-tag">Section A · White</span>
</div>
<div class="dv-s dv-b bg-navy">
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Diagonal stripes band

A band of offset pink diagonal stripes marks the change.

Section A · Mist

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 18 */
.dv-18 .dv-b:before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:repeating-linear-gradient(-45deg,#FF006E 0 8px,transparent 8px 18px)}

<!-- markup -->
<div class="dv-demo dv-18">
<div class="dv-s dv-a bg-mist">
<span class="dv-tag">Section A · Mist</span>
</div>
<div class="dv-s dv-b bg-navy">
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

S-curve

A smooth double curve (sigmoid) from high left to low right.

Section A · White

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 19 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-19">
<div class="dv-s dv-a bg-white">
<span class="dv-tag">Section A · White</span>
</div>
<div class="dv-s dv-b bg-navy">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 120 V10 C 620 10 820 110 1440 110 V120 Z"/>
</svg>
<span class="dv-tag">Section B · Navy</span>
</div>
</div>

Mountain peaks

Two layers of peaks, like a skyline or sound waveform.

Section A · Mist

Section B · Navy

Copy CSS / SVG

/* base (shared by all styles) */
.dv{--r:clamp(28px,4vw,56px);--h:clamp(36px,6vw,90px);--pad:clamp(48px,6vw,80px);font-family:Manrope,system-ui,sans-serif;color:#1C244B}
.dv-demo{border-radius:20px;overflow:hidden;border:1px solid #E4E7EF;isolation:isolate;display:flex;flex-direction:column}
.dv-s{position:relative;padding:var(--pad) 24px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg)}
.dv-a{z-index:1}.dv-b{z-index:1}
.bg-white{--bg:#FFFFFF;--fg:#1C244B}.bg-mist{--bg:#F3F5F8;--fg:#1C244B}.bg-navy{--bg:#1C244B;--fg:#FFFFFF}.bg-pink{--bg:#E00060;--fg:#FFFFFF}
.dv-svg{position:absolute;left:0;width:100%;height:var(--h);display:block;fill:var(--bg);pointer-events:none}
.dv-svg--top{bottom:calc(100% - 1px)}
.dv-demo:has(.dv-svg--top) .dv-a{padding-bottom:calc(var(--pad) + var(--h))}
.dv-17 .dv-a{padding-bottom:calc(var(--pad) + 60px)}
.dv-11 .dv-b{padding-top:calc(var(--pad) + 24px)}

/* style 20 */
/* no extra CSS: the inline SVG does the work */

<!-- markup -->
<div class="dv-demo dv-20">
<div class="dv-s dv-a bg-mist">
<span class="dv-tag">Section A · Mist</span>
</div>
<div class="dv-s dv-b bg-navy">
<svg class="dv-svg dv-svg--top" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 120 V60 L140 20 L300 70 L460 10 L640 66 L800 26 L980 72 L1160 14 L1320 60 L1440 30 V120 Z" opacity=".45"/>
<path d="M0 120 V86 L180 40 L320 78 L520 30 L700 82 L860 46 L1040 88 L1220 42 L1440 84 V120 Z"/>
</svg>
<span class="dv-tag">Section B · Navy</span>
</div>
</div>