<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>
$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 {
   display: none;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js