Breadcrumb mit Pfeilen

http://jsfiddle.net/chriscoyier/spT36/

HTML

<ol>
    <li><a href="#">Home {</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
</ol>

CSS

ol { white-space: nowrap; }
li {
    display: inline-block;
    line-height: 26px;
    margin: 0 9px 0 -10px;
    padding: 0 20px;
    position: relative;
}
li:before,
li:after {
    border-right: 1px solid #666666;
    content: '';
    display: block;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    -moz-transform: skewX(45deg);
    -ms-transform: skewX(45deg);
    -o-transform: skewX(45deg);
    -webkit-transform: skewX(45deg);
    transform: skewX(45deg);   
}
li:after {
    bottom: 0;
    top: auto;
    -moz-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
}

li:last-of-type:before, li:last-of-type:after { 
    display: none; 
}

li a { 
   font: bold 24px Sans-Serif;  
   letter-spacing: -1px; 
   text-decoration: none;
}

li:nth-of-type(1) a { color: hsl(0, 0%, 70%); } 
li:nth-of-type(2) a { color: hsl(0, 0%, 65%); } 
li:nth-of-type(3) a { color: hsl(0, 0%, 50%); } 
li:nth-of-type(4) a { color: hsl(0, 0%, 45%); } 

body { padding: 20px; }

JavaScript

// http://jsfiddle.net/chriscoyier/spT36/