$.Navigation

by mtambulut

HTML

<!-- content to be placed inside <body>…</body> -->
<ul id="breadcrumblist">
  <li><a href="/">Home</a></li>
 <li><a href="/">Blog</a></li>
 <li><a href="/">Tutorials</a></li>
 <li><a href="/">Videos</a></li>
 <li>Contact</li>
</ul>

CSS

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
ul{
  margin:0;
  padding:0;
}
.fa{
  margin-right:5px;
}
ul#breadcrumblist{
position: relative;
border: 1px solid #cdcdcd;
border-right: none;
display:inline-block;
background: linear-gradient(#f7f7f7, #ebebeb);
list-style-type:none;
}
ul#breadcrumblist li{
  display:block;
  float:left;
}
ul#breadcrumblist li:last-child, ul#breadcrumblist li a{
float: left;
  line-height:40px;
  text-align:left;
  padding-left:20px;
  padding-right:20px;
  height: 40px;
  display:block;
  float:left;
  position:relative;
}
ul#breadcrumblist li:first-child{
   text-indent:0px;
}
ul#breadcrumblist li:not(:first-child){
   text-indent:10px;
}
ul#breadcrumblist li:last-child, ul#breadcrumblist li a{
  color:#868686;
    text-decoration:none;
  font-family: 'Droid Sans', sans-serif;
  font-size:90%;
}
ul#breadcrumblist li a:first-child:after {
position: absolute;
top:50%; 
right: 0;
margin: -11.5px -10px;
border-top: solid 1px #cdcdcd;
border-right: solid 1px #cdcdcd;
width: 20px; 
height: 23px/* 40px/sqrt(3) */;
transform: rotate(30deg) skewY(30deg);
background: transparent;
content: '';
}
ul#breadcrumblist li:last-child:after, ul#breadcrumblist li a:not(:first-child):after {
position: absolute;
top:50%; 
right: 0;
margin: -11.5px -10px;
border-top: solid 1px #cdcdcd;
border-right: solid 1px #cdcdcd;
width: 20px; 
height: 23.049px/* 80px/sqrt(3) */;
transform: rotate(30deg) skewY(30deg); /* create a rhombus */
/* 49.1deg = atan(1.15) = atan(47px/40px) */
background: linear-gradient(#f7f7f7, #ebebeb);
content: '';
}
ul#breadcrumblist li a:last-child:after {
  position: absolute;
top:50%; 
right: 0;
margin: -11.5px -10px;
border-top: solid 1px #cdcdcd;
border-right: solid 1px #cdcdcd;
width: 20px; 
height: 23.049px/* 80px/sqrt(3) */;
transform: rotate(30deg) skewY(30deg); /* create a rhombus */
/* 49.1deg = atan(1.15) = atan(47px/40px) */
background: linear-gradient(#f7f7f7, #ebebeb);
content: '';
}