26 CSS Accordions — Vertical & Horizontal 17 / 26
Diagonal Slant
Vertical accordion where each row slants — open row straightens to a clean rectangle.
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>
<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);
} .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 SlideVinyl SpineCinema ReelAurora StripStepped StairCircular ArcMarquee HeaderCode CommentPaper FoldedEqualizerStacked CardsHolographic Slot
View the full collection →