Skip to content

Instantly share code, notes, and snippets.

@dutchcelt

dutchcelt/chevron_breadcrumb_item.css

Created July 30, 2023 08:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dutchcelt/608ff0ddc1e1582c60b047c8799e5852 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dutchcelt/608ff0ddc1e1582c60b047c8799e5852 to your computer and use it in GitHub Desktop.
Download ZIP
A breadcrumb list items shaped as an arrow bar.
Raw
chevron_breadcrumb_item.css
/*
https://verpex.com/blog/website-tips/how-to-create-breadcrumb-navigation-with-css
*/
.breadcrumb {
--s: 15px;
}
.breadcrumb ol li {
clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%,var(--s) 50%);
}
.breadcrumb ol li:first-child {
clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment