Last updated
Responsive Sizing
/* Make dividers responsive */
.section-divider svg {
width: 100%;
height: clamp(40px, 8vw, 120px); /* scales with viewport width */
}
/* Prevent gaps on high-DPI screens */
.section-divider {
margin-bottom: -1px;
}
Shape Style Guide
- Waves — natural, friendly brands (health, lifestyle, consumer apps)
- Triangles — technology, finance, precision-focused brands
- Curves — healthcare, wellness, soft and approachable brands
- Zigzags — energetic, dynamic, youth-oriented brands
- Diagonal — modern, bold, startup and SaaS landing pages
All generated SVG elements include aria-hidden="true" to hide decorative shapes from screen readers, ensuring they don't clutter the accessibility tree.
Examples
Example 1: Wave Divider
A smooth wave transition between a dark hero section and a white content section:
<!-- Place at the bottom of the hero section -->
<div class="section-divider" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80" preserveAspectRatio="none">
<path fill="#ffffff" fill-opacity="1"
d="M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z">
</path>
</svg>
</div>
/* CSS for the wave divider */
.section-divider {
position: relative;
bottom: -1px; /* prevent gap between section and divider */
line-height: 0;
overflow: hidden;
}
.section-divider svg {
display: block;
width: 100%;
height: 80px;
}
Example 2: Triangle Divider
A sharp triangular transition pointing downward:
<div class="divider-triangle" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60" preserveAspectRatio="none">
<polygon fill="#f8f9fa" points="0,0 1440,0 720,60"></polygon>
</svg>
</div>
.divider-triangle {
line-height: 0;
overflow: hidden;
}
.divider-triangle svg {
display: block;
width: 100%;
height: 60px;
}
Example 3: Tilted / Diagonal Divider
A diagonal section transition using CSS transform:
<section class="hero">
<div class="hero-content">...</div>
<div class="diagonal-divider" aria-hidden="true"></div>
</section>
.hero {
position: relative;
background: #1a1a2e;
padding-bottom: 80px;
}
.diagonal-divider {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
clip-path: polygon(0 100%, 100% 0, 100% 100%);
}