ol {
/* Clip n’ round */
overflow: clip;
border-radius: 16px;
li {
/* Arrow color */
background: hsl(270 100% 30%);
/* Reverses the z-indexes, making the arrows stack */
/* Result: 2, 1, 0, ... (sibling-x requires Chrome 138+) */
z-index: calc((sibling-index() * -1) + sibling-count());
&:not(:last-child) {
/* Arrow width */
padding-right: 3px;
/* Arrow shape */
corner-shape: bevel;
border-radius: 0 32px 32px 0 / 0 50% 50% 0;
/* Pull the next one into this one */
margin-right: -32px;
}
a {
/* Same shape */
corner-shape: inherit;
border-radius: inherit;
/* Overlay background */
background: hsl(270 100% 50%);
}
}
}
/* Unimportant (but kinda cool) */
ol {
margin: 0;
padding: 0;
list-style: none;
font: 700 16px system-ui;
/* “Step x” counter */
counter-reset: step;
/* For equal-width crumbs */
display: inline-grid;
/* Parents can’t sibling-count() 🤦♂️ */
&:has(:nth-child(2)) {
grid-template-columns: repeat(2, 1fr);
}
&:has(:nth-child(3)) {
grid-template-columns: repeat(3, 1fr);
}
&:has(:nth-child(4)) {
grid-template-columns: repeat(4, 1fr);
}
a {
height: 64px;
padding: 0 64px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-underline-position: under;
/* Increment with every <a> */
counter-increment: step;
&::after {
/* Display increment value */
content: "Step " counter(step);
}
&[aria-current] {
/* Current crumb styles */
background: hsl(270 100% 40%);
}
&:hover {
/* Hover crumb styles */
background: hsl(300 100% 40%);
}
}
}