26 CSS Dividers02 / 26

Light JSMIT licensed

Diagonal Slanted Section Divider CSS

The agency-landing-page staple: a hard geometric cut between two panels. Built with a single clip-path polygon driven by one --slant token, so the angle is a live variable — drag the slider and every dependent value (the polygon, the overlap padding, the accent hairline) recalculates. Includes the skewY alternative side by side, with the honest trade-offs of each.

Published

Live Demo
Try it

The code

<section class="div-02" aria-label="Diagonal slanted section divider demo">
  <div class="div-02__top">
    <div class="div-02__inner">
      <p class="div-02__eyebrow">clip-path · polygon()</p>
      <h2 class="div-02__title">One token drives the whole cut</h2>
      <p class="div-02__sub">The polygon, the compensating padding and the accent hairline all read from <code>--div-02-slant</code>.</p>
    </div>
  </div>
  <div class="div-02__edge" aria-hidden="true"></div>
  <div class="div-02__bottom">
    <div class="div-02__inner">
      <p class="div-02__lede">Drag to re-cut the seam. Nothing else in the layout has to change.</p>
      <div class="div-02__ctl">
        <label class="div-02__lab" for="div-02-angle">Slant</label>
        <input class="div-02__range" id="div-02-angle" type="range" min="0" max="11" step="0.5" value="5.5" aria-describedby="div-02-out">
        <output class="div-02__out" id="div-02-out" for="div-02-angle">5.5vw</output>
      </div>
      <p class="div-02__chip">polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%)</p>
    </div>
  </div>
</section>
.div-02 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--div-02-bg);
  --div-02-bg: oklch(0.97 0.006 265);
  --div-02-top: oklch(0.24 0.045 275);
  --div-02-ink: oklch(0.97 0.008 265);
  --div-02-dark: oklch(0.25 0.02 270);
  --div-02-mut: oklch(0.54 0.02 270);
  --div-02-acc: oklch(0.72 0.17 330);
  --div-02-slant: 5.5vw;
  font-family: 'Segoe UI',system-ui,-apple-system,sans-serif;
  color: var(--div-02-dark);
  position: relative;
  overflow: hidden;
}

.div-02 *,
.div-02 *::before,
.div-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.div-02__top {
  position: relative;
  z-index: 2;
  min-height: 52svh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,var(--div-02-top),oklch(0.2 0.06 300));
  color: var(--div-02-ink);
  padding: clamp(34px,7vw,80px) clamp(20px,5vw,56px) calc(var(--div-02-slant) + clamp(34px,6vw,72px));
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--div-02-slant)),0 100%);
  transition: clip-path .18s ease,padding-bottom .18s ease;
}

.div-02__edge {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 52svh;
  background: linear-gradient(90deg,var(--div-02-acc),oklch(0.7 0.19 275));
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--div-02-slant) + 3px),0 calc(100% + 3px));
  transition: clip-path .18s ease;
}

.div-02__bottom {
  position: relative;
  z-index: 2;
  min-height: 48svh;
  display: grid;
  place-items: center;
  padding: clamp(30px,5vw,64px) clamp(20px,5vw,56px);
}

.div-02__inner {
  width: min(100%,58ch);
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.div-02__eyebrow {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--div-02-acc);
}

.div-02__title {
  font-size: clamp(28px,5vw,52px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}

.div-02__sub {
  font-size: clamp(14px,1.7vw,17px);
  line-height: 1.6;
  color: oklch(0.9 0.02 280/.82);
  text-wrap: pretty;
}

.div-02__sub code,
.div-02__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
}

.div-02__sub code {
  font-size: .86em;
  background: oklch(1 0 0/.13);
  padding: 2px 7px;
  border-radius: 6px;
}

.div-02__lede {
  font-size: clamp(15px,1.9vw,19px);
  line-height: 1.6;
  text-wrap: pretty;
}

.div-02__ctl {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  background: oklch(1 0 0);
  border: 1px solid oklch(0.25 0.02 270/.12);
  border-radius: 99px;
  padding: 10px 20px;
  box-shadow: 0 6px 22px oklch(0.25 0.02 270/.09);
}

.div-02__lab {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--div-02-mut);
}

.div-02__range {
  -webkit-appearance: none;
  appearance: none;
  width: min(46vw,230px);
  height: 44px;
  background: transparent;
  cursor: pointer;
}

.div-02__range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg,var(--div-02-acc),oklch(0.7 0.19 275));
}

.div-02__range::-moz-range-track {
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg,var(--div-02-acc),oklch(0.7 0.19 275));
}

.div-02__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7.5px;
  border-radius: 99px;
  background: oklch(1 0 0);
  border: 2px solid var(--div-02-acc);
  box-shadow: 0 2px 8px oklch(0.25 0.02 270/.3);
}

.div-02__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--div-02-acc);
  border-radius: 99px;
  background: oklch(1 0 0);
}

.div-02__range:focus-visible {
  outline: 2px solid var(--div-02-acc);
  outline-offset: 4px;
  border-radius: 99px;
}

.div-02__out {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 13px;
  font-weight: 600;
  min-width: 5.5ch;
  color: var(--div-02-dark);
}

.div-02__chip {
  font-size: 11px;
  color: var(--div-02-mut);
  padding: 8px 14px;
  border: 1px solid oklch(0.25 0.02 270/.14);
  border-radius: 99px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .div-02__top,
    .div-02__edge {
    transition: none;
  }
}
(() => {
  document.querySelectorAll('.div-02').forEach((root) => {
    if (root.dataset.ppWired) return;
    root.dataset.ppWired = '1';
    const range = root.querySelector('#div-02-angle');
    const out = root.querySelector('#div-02-out');
    if (!range || !out) return;
    const sync = () => {
      root.style.setProperty('--div-02-slant', range.value + 'vw');
      out.textContent = range.value + 'vw';
    };
    range.addEventListener('input', sync);
    sync();
  });
})();
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Divider from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Diagonal Slanted Section Divider CSS
Source: https://codefronts.com/snippets/css-dividers/diagonal-slanted-section-divider-css/

The agency-landing-page staple: a hard geometric cut between two panels. Built with a single clip-path polygon driven by one --slant token, so the angle is a live variable — drag the slider and every dependent value (the polygon, the overlap padding, the accent hairline) recalculates. Includes the skewY alternative side by side, with the honest trade-offs of each.
## HTML
```html
<section class="div-02" aria-label="Diagonal slanted section divider demo">
  <div class="div-02__top">
    <div class="div-02__inner">
      <p class="div-02__eyebrow">clip-path · polygon()</p>
      <h2 class="div-02__title">One token drives the whole cut</h2>
      <p class="div-02__sub">The polygon, the compensating padding and the accent hairline all read from <code>--div-02-slant</code>.</p>
    </div>
  </div>
  <div class="div-02__edge" aria-hidden="true"></div>
  <div class="div-02__bottom">
    <div class="div-02__inner">
      <p class="div-02__lede">Drag to re-cut the seam. Nothing else in the layout has to change.</p>
      <div class="div-02__ctl">
        <label class="div-02__lab" for="div-02-angle">Slant</label>
        <input class="div-02__range" id="div-02-angle" type="range" min="0" max="11" step="0.5" value="5.5" aria-describedby="div-02-out">
        <output class="div-02__out" id="div-02-out" for="div-02-angle">5.5vw</output>
      </div>
      <p class="div-02__chip">polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%)</p>
    </div>
  </div>
</section>
```
## CSS
```css
.div-02 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--div-02-bg);
  --div-02-bg: oklch(0.97 0.006 265);
  --div-02-top: oklch(0.24 0.045 275);
  --div-02-ink: oklch(0.97 0.008 265);
  --div-02-dark: oklch(0.25 0.02 270);
  --div-02-mut: oklch(0.54 0.02 270);
  --div-02-acc: oklch(0.72 0.17 330);
  --div-02-slant: 5.5vw;
  font-family: 'Segoe UI',system-ui,-apple-system,sans-serif;
  color: var(--div-02-dark);
  position: relative;
  overflow: hidden;
}

.div-02 *,
.div-02 *::before,
.div-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.div-02__top {
  position: relative;
  z-index: 2;
  min-height: 52svh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,var(--div-02-top),oklch(0.2 0.06 300));
  color: var(--div-02-ink);
  padding: clamp(34px,7vw,80px) clamp(20px,5vw,56px) calc(var(--div-02-slant) + clamp(34px,6vw,72px));
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--div-02-slant)),0 100%);
  transition: clip-path .18s ease,padding-bottom .18s ease;
}

.div-02__edge {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 52svh;
  background: linear-gradient(90deg,var(--div-02-acc),oklch(0.7 0.19 275));
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--div-02-slant) + 3px),0 calc(100% + 3px));
  transition: clip-path .18s ease;
}

.div-02__bottom {
  position: relative;
  z-index: 2;
  min-height: 48svh;
  display: grid;
  place-items: center;
  padding: clamp(30px,5vw,64px) clamp(20px,5vw,56px);
}

.div-02__inner {
  width: min(100%,58ch);
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.div-02__eyebrow {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--div-02-acc);
}

.div-02__title {
  font-size: clamp(28px,5vw,52px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}

.div-02__sub {
  font-size: clamp(14px,1.7vw,17px);
  line-height: 1.6;
  color: oklch(0.9 0.02 280/.82);
  text-wrap: pretty;
}

.div-02__sub code,
.div-02__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
}

.div-02__sub code {
  font-size: .86em;
  background: oklch(1 0 0/.13);
  padding: 2px 7px;
  border-radius: 6px;
}

.div-02__lede {
  font-size: clamp(15px,1.9vw,19px);
  line-height: 1.6;
  text-wrap: pretty;
}

.div-02__ctl {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  background: oklch(1 0 0);
  border: 1px solid oklch(0.25 0.02 270/.12);
  border-radius: 99px;
  padding: 10px 20px;
  box-shadow: 0 6px 22px oklch(0.25 0.02 270/.09);
}

.div-02__lab {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--div-02-mut);
}

.div-02__range {
  -webkit-appearance: none;
  appearance: none;
  width: min(46vw,230px);
  height: 44px;
  background: transparent;
  cursor: pointer;
}

.div-02__range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg,var(--div-02-acc),oklch(0.7 0.19 275));
}

.div-02__range::-moz-range-track {
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg,var(--div-02-acc),oklch(0.7 0.19 275));
}

.div-02__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7.5px;
  border-radius: 99px;
  background: oklch(1 0 0);
  border: 2px solid var(--div-02-acc);
  box-shadow: 0 2px 8px oklch(0.25 0.02 270/.3);
}

.div-02__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--div-02-acc);
  border-radius: 99px;
  background: oklch(1 0 0);
}

.div-02__range:focus-visible {
  outline: 2px solid var(--div-02-acc);
  outline-offset: 4px;
  border-radius: 99px;
}

.div-02__out {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 13px;
  font-weight: 600;
  min-width: 5.5ch;
  color: var(--div-02-dark);
}

.div-02__chip {
  font-size: 11px;
  color: var(--div-02-mut);
  padding: 8px 14px;
  border: 1px solid oklch(0.25 0.02 270/.14);
  border-radius: 99px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .div-02__top,
    .div-02__edge {
    transition: none;
  }
}
```

## JavaScript
```js
(() => {
  document.querySelectorAll('.div-02').forEach((root) => {
    if (root.dataset.ppWired) return;
    root.dataset.ppWired = '1';
    const range = root.querySelector('#div-02-angle');
    const out = root.querySelector('#div-02-out');
    if (!range || !out) return;
    const sync = () => {
      root.style.setProperty('--div-02-slant', range.value + 'vw');
      out.textContent = range.value + 'vw';
    };
    range.addEventListener('input', sync);
    sync();
  });
})();
```

How this works

Two techniques compete here. The modern one is a clip-path polygon on the upper panel, expressed entirely in terms of one custom property:

.top{ --slant:5vw;
  padding-bottom:calc(var(--slant) + 2rem);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }

Because the cut eats into the bottom of the box, the padding must compensate by exactly the slant height or your last line of text gets sliced. Deriving the padding with calc() from the same variable makes that impossible to get wrong — which is why the slider can drive the angle from 0 to 12vw without the layout ever breaking.

The classic alternative is transform:skewY(-4deg) on the section plus skewY(4deg) on an inner wrapper to un-skew the content. It ships to older browsers and gives a true parallelogram, but it rotates every child's rasterisation (text can soften), it needs the counter-transform on a real element, and it cannot cut only one edge. Use clip-path unless you must support pre-2016 engines.

The 1px accent line along the diagonal is a second, slightly larger clipped layer sitting behind the panel — the cheapest way to stroke a clip-path, which has no border of its own.

Make it yours

  • Mirror the cut: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant))) tilts the seam the other way; alternate directions down a page for a zigzag rhythm.
  • Chevron seam: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 50% 100%, 0 calc(100% - var(--slant))) gives a centred V.
  • Angle in degrees: swap the vw slant for tan(4deg) * 100vw — modern CSS has trig functions, so --slant:calc(tan(4deg) * 100vw) holds a constant angle at every width.
  • Full-bleed image panel: clip-path clips backgrounds and images identically, so the same polygon works on a photographic hero with no extra markup.

Gotchas — read before shipping

  • clip-path clips overflow AND box-shadow — a shadow on a clipped panel simply vanishes. Put shadows on a parent or fake them with a stacked layer.
  • Forgetting the compensating padding is the classic bug: at 6vw the slant swallows ~80px of content on a desktop viewport.
  • Percentage slants behave differently from vw: 5% of the element's HEIGHT, not the page width, so tall panels get much steeper cuts. Use vw (or the tan() form) for a stable angle.
  • skewY versions must un-skew the content wrapper, and any position:fixed descendant inside a transformed ancestor becomes position:absolute — a real footgun for sticky headers.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), text-wrap as this demo is written. The core technique itself goes back further — Chrome 111+.

clip-path:polygon() is supported everywhere since 2016 (Chrome 55, Safari 9.1, Firefox 54). CSS trig functions like tan() need Chrome 111 / Safari 15.4 / Firefox 108 and are used only in the optional variant.

Techniques used in this demo

clip-pathMDN ↗text-wrap: prettyMDN ↗clamp()MDN ↗place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →