Um dos jeitos tradicionais é usar o "border triangle":
.breadcrumb {
display:inline-block;
position:relative;
line-height:30px; /* altura final da linha */
text-align:center;
padding-right:20px;
padding-left:35px; /* 1/2 da altura da linha a mais */
/* que o right para compensar o bico */
color:#fff;
}
.breadcrumb:after {
content:"";display:block;position:absolute;
box-sizing:border-box; /* para respeitar medida interna */
top:0;bottom:0;left:100%;
border:solid 15px transparent; /* metade da altura da linha */
z-index:1;
}
.blue {background:blue} .blue:after {border-left-color:blue}
.gold {background:gold} .gold:after {border-left-color:gold}
.green{background:green} .green:after{border-left-color:green}
.red {background:red} .red:after {border-left-color:red}
<span class="breadcrumb blue">UM</span><!--
--><span class="breadcrumb gold">DOIS</span><!--
--><span class="breadcrumb green">TRÊS</span><!--
--><span class="breadcrumb red">QUATRO</span>
Esta é apenas uma demonstração da técnica, o importante a se observar é o uso do pseudoelemento, e do border.
No caso, usei <span>
para simplificar (por isso os comments para matar quebra de linha), você tem que escolher o display mais adequado para o seu caso. Sobre o espaçamento dos elementos, tem esse post aqui:
Remover espaço entre item de lista html