CSS Breadcrumbs v3

Pure CSS

by Robert Herring

HTML

<ul class="breadcrumbs">
    <li><a href="#">First Link</a></li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#">Third Link</a></li>
    <li><a href="#">Fourth Link</a></li>
</ul>

SCSS

$primary-color: #4679BD;
$hover-color: #F6F6F6;
$text-color: #F6F6F6;
$hover-text-color: #4679BD;


* { margin: 0; padding: 0; font-family: sans-serif; }


body { background: url("http://people.ofproverbs.com/images/footerbg.jpg") top center repeat; }
a { text-decoration: none; }
li { list-style: none; float:left; }

.breadcrumbs {
    margin: 10px;
    float:left;
}


li a:hover { background: $hover-color; color: $hover-text-color; }
li a:hover:after { color: $hover-color; }
li a:hover:before { border-left: 25px solid $hover-color; }


li a {
    display: block;
    min-height: 20px;
    max-height: 20px;
    border-image: none;
    position: relative;
    margin-left: 25px;
    margin-right: 6px;
    padding: 15px 0 15px 10px;
    color: $text-color;
    background: $primary-color;
    z-index: 1;
}
li a:before {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 25px solid $primary-color;
    border-bottom: 25px solid transparent;
    z-index: -1;
}
li a:after {
    content: "";
    position: absolute;
    left: -25px;
    top: 0px;
    width: 0px;
    height: 0px;
    border-width: 25px;
    border-style: solid;
    border-left: 25px solid transparent;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    color: $primary-color;
    z-index: -1;
}


li:first-child a {
    margin-left: 0;
    padding-left: 20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    
}
li:first-child a:after {
    display: none;
}


li:last-child a {
    padding-right: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: $hover-color;
    color: $hover-text-color;
    text-decoration: underline;
    cursor: default;
}
li:last-child a:after {
    color: $hover-color;
}
li:last-child a:before {
   ...