20 CSS Diagonal Sections

Two techniques dominate, and they fail in different ways. clip-path: polygon() cuts the section's own box — you give it four corner points and shift one edge, so polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%) produces a bottom edge that rises 5vw across the width. Nothing inside the section rotates, so text stays upright with no counter-transform needed. The alternative is transform: skewY(-3deg) on the band with skewY(3deg) on an inner wrapper to unskew the content. Skew has broader legacy support and lets the background bleed past the cut, but every child needs the counter-transform and the rotated box grows taller than you authored. For new work use clip-path — support is universal in evergreen browsers and the mental model is far simpler. Drive the angle from one custom property so a consumer changes it in a single place rather than hunting through four polygon coordinates.

Almost always because the angle is expressed in a fixed unit that does not shrink with the viewport, or because a skew pushes the box wider than 100%. A skewY(-6deg) that looks elegant at 1440px becomes a near-vertical cliff at 360px, and the rotated corners can extend past the viewport edge and take the document sideways. Two fixes work together. First, express the angle in viewport units or clamp it — --cut: clamp(1.5rem, 5vw, 6rem) — so the cut scales with the width instead of dominating a narrow screen. Second, put overflow: clip on the section itself rather than reaching for overflow-x: hidden on body. The body-level fix is the common advice and it is the wrong one: it silently breaks position: sticky anywhere else on the page, because a scroll container is created on the root. clip contains the spill without creating that container.

Counter-skew the content by the exact inverse of the parent. If the section is transform: skewY(-4deg), an inner wrapper takes transform: skewY(4deg) and everything inside it renders level again. The wrapper must be a direct child that holds all the content — skew propagates through the subtree, so skewing the section and unskewing individual paragraphs leaves images and buttons still tilted. Two consequences catch people out. The rotated box occupies more vertical space than its authored height, so the section grows and your padding no longer reads as you set it; compensate by reducing block padding. And because both transforms create containing blocks, any position: fixed descendant will anchor to the skewed element rather than the viewport. If you only want the background angled and not the layout, clip-path avoids the whole problem — nothing rotates, so no counter-transform is needed at all.

Because the sections overlap and the later one wins by document order. Angled bands are usually pulled together with negative margins so the cut edges meet, which means one section's box genuinely sits on top of the other's content. z-index looks like the fix and often does nothing, because it only applies to positioned elements — add position: relative to both sections first, then set explicit z-index values. The subtler trap is stacking contexts. A transform, filter, opacity below 1, or will-change on an ancestor creates a new stacking context, and a child's z-index is then confined inside it no matter how large the number. That is exactly why the skew technique produces this bug more often than clip-path: the skew itself creates the context. Check the ancestor chain in DevTools before escalating z-index values that cannot possibly win.

clip-path for most work, inline SVG when you need the edge to be exact. clip-path: polygon() is one declaration, animates cleanly, and needs no extra markup — for a straight diagonal it is almost always the right answer. Inline SVG earns its place in two situations. First, when the edge must stay pixel-crisp across every viewport: an SVG with preserveAspectRatio="none" stretches to any width without the sub-pixel rounding that can leave a faint seam where two clipped bands meet. Second, when the edge needs a fill that differs from the section behind it — a gradient or a second colour on the wedge itself — which a clip cannot express because clipping removes pixels rather than painting them. The SVG approach costs you extra markup and an aria-hidden attribute, since the shape is decorative. Both are fully responsive; neither requires JavaScript.

That hairline is sub-pixel rounding, not a mistake in your polygon. When two bands meet on an angle at a fractional device pixel ratio, the browser rounds each edge independently and a sliver of the page background shows through. The reliable fix is to overlap slightly: pull the lower section up by a pixel with margin-block-start: -1px, or extend its clip path a fraction past the join. A second approach is to give the two sections the same background and let the cut be implied by a foreground element, which sidesteps the join entirely. Avoid trying to solve it by rounding the angle to whole degrees — the seam depends on the rendered pixel grid, not on your authored value, so it appears at some zoom levels and not others. Always test at 110% and 125% browser zoom, since those are the ratios where the artefact shows up most reliably.

They can be, and the risks are mostly about text near the cut. Content must never sit so close to the angled edge that it clips at narrow widths — the safe approach is padding that scales with the angle, so as the cut deepens the text is pushed clear of it. Check contrast against the band's own fill rather than the page background, since an angled section usually introduces a new colour behind the text. Decorative overlays and SVG edges take aria-hidden="true", because a screen reader announcing a shape adds nothing. Use real section elements with a heading each: the angle is presentation, but the band is a genuine landmark in the document and should be reachable as one. Finally, any demo that animates its angle on scroll must be fully static under prefers-reduced-motion; a shape that morphs as the user scrolls is exactly the kind of motion that setting exists to suppress.

The CSS ports unchanged — every .dgs-NN selector and custom property is framework-agnostic, and 17 of the 20 designs need no JavaScript at all. The natural component boundary is a single AngledSection wrapper that accepts the angle, the direction of the cut, and which edges are angled, then renders a section with the clip path composed from those props. Because the angle is a custom property rather than a hardcoded polygon, a consumer overrides it inline without touching the stylesheet. For Tailwind, the clip path needs an arbitrary value — [clip-path:polygon(0_0,100%_0,100%_92%,0_100%)] — which is unreadable inline, so it belongs in a component class or a plugin utility rather than scattered through markup. The three JavaScript demos are small init functions: useEffect with a cleanup return in React, onMounted plus onBeforeUnmount in Vue, onMount returning cleanup in Svelte. The scroll-driven one uses animation-timeline: view() where supported, so in modern browsers it needs no script at all.