26 CSS Accordions — Vertical & Horizontal

Diagonal Slant

Vertical accordion where each row slants — open row straightens to a clean rectangle.

Pure CSS MIT licensed

Diagonal Slant the 17th of 26 designs in the 26 CSS Accordions — Vertical & Horizontal collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<details class="acc-slant" name="acc-slant" open>
  <summary>Architecture</summary>
  <p>Static-first, edge-cached, no SSR runtime. Fast on every connection.</p>
</details>
<details class="acc-slant" name="acc-slant">
  <summary>Data layer</summary>
  <p>Content lives in flat files. Authoring is git-tracked and reviewable.</p>
</details>
<details class="acc-slant" name="acc-slant">
  <summary>Deployment</summary>
  <p>Build once, push to CDN. No servers to manage, no scaling concerns.</p>
</details>

.acc-slant {
  background: rgba(156,123,214,0.08);
  border: 1px solid rgba(156,123,214,0.2);
  margin-bottom: 6px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: clip-path .35s cubic-bezier(.3,1.4,.5,1), background .25s;
}
.acc-slant summary {
  cursor: pointer; list-style: none; padding: 13px 22px;
  font: 700 12px/1 system-ui; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(240,238,255,0.7);
}
.acc-slant summary::-webkit-details-marker { display: none; }
.acc-slant[open] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  background: rgba(156,123,214,0.18);
}
.acc-slant[open] > summary { color: #f0eeff; }
.acc-slant p {
  margin: 0; padding: 0 22px 14px;
  font: 12px/1.6 system-ui; color: rgba(240,238,255,0.6);
}

More from 26 CSS Accordions — Vertical & Horizontal

Curtain Slide Vinyl Spine Cinema Reel Aurora Strip Stepped Stair Circular Arc Marquee Header Code Comment Paper Folded Equalizer Stacked Cards Holographic Slot

View the full collection →