How to use the Section Divider Generator
- Pick a shape: angle, arrow, notch, curve, scoop, curved angle, wave, zigzag, scallops or steps.
- Choose the edge to cut — bottom, top or both (both edges with an angle gives the classic slanted band).
- Set the cut depth. Use px or vw so the angle stays constant when the section grows; for waves and zigzags set the number of repeats.
- Copy the CSS onto your section. The optional rule pulls the next section up under the cut so no gap is left.
How angled sections work
The section keeps its normal rectangular box; clip-path: polygon() just hides a triangle (or curve, or zigzag) along its edge. Each point on the cut edge uses calc(100% - 80px), so the cut is always 80 px deep — on a short hero and on a long section alike — and the angle doesn’t change as content grows.
.section {
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
padding-bottom: calc(80px + 3rem);
}
.section + * { margin-top: -80px; padding-top: calc(80px + 3rem); }The second rule slides the next section up underneath the cut, so its background — not the page’s — fills the angled gap. z-index: 1 keeps the clipped section on top. Curves, waves and scallops are drawn as polygons with many points, which every modern browser renders smoothly.
clip-path vs. skew vs. SVG
transform: skewY() also tilts a section but skews its content too, so you have to un-skew every child. An SVG divider needs an extra element. clip-path cuts the section itself — backgrounds, gradients and photos included — with one rule. For layered, organic waves use the SVG Wave Generator; to fade an edge softly instead of cutting it, use the CSS Mask Generator.
Also searched as: angled section css, css slanted section, diagonal section css, css shape divider, curved section css, zigzag border css, clip-path section divider, css section separator.
Tools that pair well with the Section Divider Generator
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
- SVG Blob Generator — Create smooth, organic blob shapes for hero backgrounds, avatars and illustrations.
- CSS Triangle Generator — Make a pure-CSS triangle for a tooltip arrow, dropdown caret or speech bubble: choose one of 8 directions, the width, height and color, and copy either the classic border trick or a simpler clip-path version.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.