Page sections divided by angled lines instead of straight ones. Adds visual rhythm — the eye sweeps diagonally rather than stepping flatly down.
Instead of stacking flat rectangular sections, diagonal layouts angle the edge between two background colors so the divider runs at ~5–8°. The result is a more dynamic, less corporate feel — the eye is pulled diagonally across the page. Especially common on agency landing pages, fintech sites, and event microsites that want energy but still want a clean, structured layout.
Two modern approaches: (1) clip-path: polygon(...) on each section with corners shifted up or down by ~6% gives an exact angled edge; (2) a ::before pseudo-element with transform: skewY(-3deg) and the section's background color provides the cut, while the inner content stays unskewed. Either way, give sections a slight negative margin-top so they overlap and the cut looks intentional. Padding is increased to compensate for the diagonal taking up vertical space.
Scroll inside. Sections meet at angled edges instead of flat lines.
Software that respects your attention — built by a small team in Brooklyn.
Sub-60ms updates across devices.
Drop-in widgets, ready to use.
Every action, one keystroke away.
Build a landing page with diagonal section dividers (instead of flat horizontal cuts). Use 4 stacked sections, each with overflow:hidden and padding-top/bottom of 100-120px to absorb the diagonal. Each section after the hero gets a clip-path:polygon to angle its top and/or bottom edge by ~6% — e.g. clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%) creates a downward-angled top edge and upward-angled bottom edge. Alternate direction every section so the page doesn't lean one way the whole scroll. Add margin-top:-50px on each angled section so they overlap and the cut looks decisive (not a gap). Keep the angle subtle (4-8 degrees max). Use 4 different background colors / gradients (dark hero, white, warm gray, amber-coral gradient finale). Content inside each section stays centered with max-width:640px. On mobile, the diagonals still work but reduce padding to 60-80px.