26 CSS Dividers
02 / 26

All 26 in 26 CSS Dividers

  1. 01SVG Wave Section Divider CSS
  2. 02Diagonal Slanted Section Divider CSS
  3. 03Gradient Horizontal Rule CSS
  4. 04Text with Lines on Sides Divider CSS ("OR" Divider)
  5. 05Curved Arch Section Divider CSS
  6. 06Zigzag Torn Paper Cut Divider CSS
  7. 07Blob Organic SVG Divider CSS
  8. 08Pure CSS Ornamental Divider with Pseudo-Elements
  9. 09Editorial Article Serif Divider CSS
  10. 10Neo-Brutalist Heavy Border Divider CSS
  11. 11Art Deco Geometric Gold Divider CSS
  12. 12Organic Leaf & Vine SVG Divider CSS
  13. 13Cyberpunk Neon Glow Divider CSS
  14. 14Luxury Minimalist Gold Accent HR Line CSS
  15. 15Data Dashboard Dotted Grid Divider CSS
  16. 16Wedding Heart Icon Divider CSS
  17. 17Editorial Thin Double-Line Divider CSS
  18. 18Medieval Fantasy Star Crest Divider CSS
  19. 19Subtle Faded Border-Bottom Divider CSS
  20. 208-Bit Retro Pixelated Divider CSS
  21. 21Multi-Column Newspaper Rule Divider CSS
  22. 22Bouncing Animated Dots Divider CSS
  23. 23Audio Waveform SVG Divider CSS
  24. 24Confetti & Sparkle SVG Divider CSS
  25. 25Vertical Flexbox Divider Line CSS
  26. 26Hand-Drawn Doodle SVG Divider CSS
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.

Live Demo
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

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 ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →