Stealing from CSS Tricks - CSS Triangle, you can do something like
li.breadcrumb:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-bottom: 20px solid #eee;
border-left: 20px solid #ccc;
}
li.breadcrumb:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-bottom: 20px solid #eee;
border-left: 20px solid #ccc;
}
li.first-crumb:after {
border-top: 20px solid #ccc;
border-bottom: 20px solid #ccc;
border-left: 20px solid #aaa;
}
li.last-crumb:after {
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 20px solid #eee;
}
li.breadcrumb {
list-style-type: none;
background-color: #ccc;
display: inline-block;
float: left;
line-height: 0;
}
li.first-crumb {
background: #aaa;
}
li.last-crumb {
background: #eee;
}
li.breadcrumb a {
text-decoration: none;
}
<div class="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb first-crumb"><a href="#">Hurr</a>
</li>
<li class="breadcrumb"><a href="#">Durr</a>
</li>
<li class="breadcrumb last-crumb"><span>Furr</span>
</li>
</ul>
</div>
<div class="arrow-right"></div>
Original JSFiddle