CSS Breadcrumbs

Pure CSS

by Robert Herring

HTML

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

CSS

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

body { background: #fff; }
a { text-decoration: none; }
li { list-style: none; float:right; }

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

li a {
    background:#4072B4;
    color:#ffffff;
    min-height: 20px;
    max-height: 20px;
    padding:15px 10px 15px 40px;
    position: relative;
    float:right;
    margin-right:5px;
    text-align:left;
}
li a:hover { background: #5C91D6; }
li a:hover:after { border-left: 25px solid #5C91D6; }
li:first-child a:after { border-left:none; }
li:first-child a {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding:15px 20px 15px 40px;
    background: #5C91D6;
    text-decoration:underline;
    cursor:default;
}
li a:after {
    content:"";
    position: absolute;
    left: 100%;
    top: 0;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 25px solid #4072B4;
    border-bottom: 25px solid transparent;
}

li:last-child a:before { border-left:none; }
li:last-child a {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding:15px 10px 15px 25px;
}
li a:before {
    content:"";
    position: absolute;
    left: 0px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 25px solid #fff;
    border-bottom: 25px solid transparent;
}