39 CSS Breadcrumbs35 / 39

Pure CSSMIT licensed

Skewed Parallel Quadrilateral CSS Breadcrumb Bar

A sporty, angular breadcrumb of parallelogram segments: each crumb is skewed with transform:skewX(-20deg) and its text un-skewed back so labels stay upright inside slanted blocks — the dynamic, motion-suggesting look common in gaming, sports and automotive UIs.

Published Updated

Live Demo
Try it

The code

<nav class="bc-35" aria-label="Breadcrumb">
  <ol>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Garage</span></a></li>
    <li><a href="#"><span>Models</span></a></li>
    <li><a href="#" aria-current="page"><span>GT-R Spec</span></a></li>
  </ol>
</nav>
.bc-35 {
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.16 0.015 250);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-35 * {
  box-sizing: border-box;
}

.bc-35 ol {
  display: flex;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-35 a {
  display: block;
  padding: 0;
  transform: skewX(-20deg);
  background: oklch(0.4 0.03 250);
  overflow: hidden;
  transition: background-color .18s ease;
}

.bc-35 a span {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  transform: skewX(20deg);
  font: 700 13px/1 system-ui,sans-serif;
  letter-spacing: .03em;
  color: oklch(0.9 0.01 250);
  text-transform: uppercase;
}

.bc-35 li:nth-child(2) a {
  background: oklch(0.44 0.04 250);
}

.bc-35 li:nth-child(3) a {
  background: oklch(0.48 0.05 250);
}

.bc-35 a:hover {
  background: oklch(0.55 0.08 250);
}

.bc-35 li:last-child a {
  background: oklch(0.62 0.19 25);
}

.bc-35 li:last-child a:hover {
  background: oklch(0.66 0.2 25);
}

.bc-35 a:focus-visible {
  outline: none;
}

.bc-35 a:focus-visible span {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .bc-35 a {
    transition: none;
  }
}
/* No JavaScript — each block is skewX(-20deg) into a parallelogram; the inner span is skewX(20deg) to keep the label upright. Focus ring rides the un-skewed span. */
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 Breadcrumb 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: Skewed Parallel Quadrilateral CSS Breadcrumb Bar
Source: https://codefronts.com/navigation/css-breadcrumbs/diagonal-slash/

A sporty, angular breadcrumb of parallelogram segments: each crumb is skewed with transform:skewX(-20deg) and its text un-skewed back so labels stay upright inside slanted blocks — the dynamic, motion-suggesting look common in gaming, sports and automotive UIs.
## HTML
```html
<nav class="bc-35" aria-label="Breadcrumb">
  <ol>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Garage</span></a></li>
    <li><a href="#"><span>Models</span></a></li>
    <li><a href="#" aria-current="page"><span>GT-R Spec</span></a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-35 {
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.16 0.015 250);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-35 * {
  box-sizing: border-box;
}

.bc-35 ol {
  display: flex;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-35 a {
  display: block;
  padding: 0;
  transform: skewX(-20deg);
  background: oklch(0.4 0.03 250);
  overflow: hidden;
  transition: background-color .18s ease;
}

.bc-35 a span {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  transform: skewX(20deg);
  font: 700 13px/1 system-ui,sans-serif;
  letter-spacing: .03em;
  color: oklch(0.9 0.01 250);
  text-transform: uppercase;
}

.bc-35 li:nth-child(2) a {
  background: oklch(0.44 0.04 250);
}

.bc-35 li:nth-child(3) a {
  background: oklch(0.48 0.05 250);
}

.bc-35 a:hover {
  background: oklch(0.55 0.08 250);
}

.bc-35 li:last-child a {
  background: oklch(0.62 0.19 25);
}

.bc-35 li:last-child a:hover {
  background: oklch(0.66 0.2 25);
}

.bc-35 a:focus-visible {
  outline: none;
}

.bc-35 a:focus-visible span {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .bc-35 a {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — each block is skewX(-20deg) into a parallelogram; the inner span is skewX(20deg) to keep the label upright. Focus ring rides the un-skewed span. */
```

How this works

Each crumb block is skewed with transform:skewX(-20deg), turning the rectangle into a parallelogram whose parallel slanted edges suggest forward motion. Skew, however, distorts everything inside it — so the label is wrapped in an inner span that gets the inverse transform:skewX(20deg), cancelling the tilt so the text stands upright inside the slanted block. This paired skew/un-skew is the entire trick and the classic way to build angular UI without clip-path.

Blocks butt together with a small gap that, because of the skew, reads as a consistent diagonal seam between segments. The palette steps in tone along the trail and the current crumb takes the accent. First and last blocks can keep their outer edges square (by not skewing, or by masking) for a tidy bar boundary. Focus rings ride on the inner (un-skewed) span so they render as upright rectangles, not slanted ones — a small accessibility nicety that keeps the ring legible.

Make it yours

  • Skew angle is the attitude dial: -12deg is subtle, -28deg is aggressive; remember to invert it on the inner span.
  • Palette steps: tone-down each successive block, accent the current — or go monochrome with one hue.
  • Square off the bar ends by leaving the first/last block un-skewed, or clip their outer edge.
  • Add a thin bright leading edge (border-inline-start) on each block for a 'lit rim' sporty accent.

Gotchas — read before shipping

  • Skew distorts children — you MUST un-skew the inner content span with the inverse angle, or text and icons come out slanted.
  • Put the :focus-visible ring on the un-skewed inner span so the outline is a normal rectangle, not a parallelogram.
  • Backgrounds/borders skew too; if you want a square outer edge, don't skew the first/last block — handle it explicitly.
  • Skewed hit areas are parallelograms — fine for clicks, but keep adequate height so the slanted target stays comfortably tappable.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome all.

transform:skewX and the un-skew technique are universally supported. oklch() palette (2023) is the only modern touch. Robust everywhere.

Techniques used in this demo

oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →