Triangle breadcrumbs w/ skew

HTML

<ol class="breadcrumbs">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Clients</a></li>
</ol>

CSS

ol.breadcrumbs { white-space: nowrap; }
ol.breadcrumbs li {
    display: inline-block;
    line-height: 26px;
    margin: 0 9px 0 -10px;
    padding: 0 20px;
    position: relative;
}
ol.breadcrumbs li:before,
ol.breadcrumbs 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);   
}
ol.breadcrumbs 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);
}

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

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

ol.breadcrumbs li:last-child:after {
  display: none; 
}

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

JavaScript

/*
    Via Rowan Lewis
     
    updates by Chris Coyier
*/