CSS
body{color: rgba(0,0,0,.4)}
.breadcrumb {
font-size: 0px;
}
.breadcrumb > * {
font-size: 16px;
color: rgba(0,0,0,.4);
background: #c8f1fe;
display: inline-block;
padding: 0 8px 0 30px;
margin: 0 1px;
height: 40px;
line-height: 40px;
position: relative;
}
.breadcrumb > span {
background: #76cae6;
}
.breadcrumb > span:after {
border-color: transparent transparent transparent #76cae6;
}
/* Left inset arrow */
.breadcrumb > :before {
position: absolute;
top: 0;
content: '';
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #9ad4e2;
z-index: 1;
}
/* Right arrow tip */
.breadcrumb > :after {
position: absolute;
top: 0;
content: '';
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #c8f1fe;
z-index: 2;
}
/* The first item has no inset arrow */
.breadcrumb :first-child {
padding-left: 20px;
}
.breadcrumb :first-child:before {
border: none
}
