bootstrap tab css

[fede5426]

Podrias hacerlo con las pseudoclases :before y :after..

Código CSS:

li:before{
    content:" ";
    position:absolute;
    right:100%;
    top:0;
    border-right:8px solid #115191;
    border-top:15px solid transparent;
}
 
li:after{
    content:" ";
    position:absolute;
    left:100%;
    top:0;
    border-left:8px solid #115191;
    border-top:15px solid transparent;
}
 

Con eso agregarías los triángulos a ambos lados de los items de lista, si quisieras hacerlo como en la imagen que pasaste (es decir, de diferentes colores), tendrías que usar identificadores.. por ejemplo "li#rosa:after{ /* estilos */}" igual con :before y aplicado a cada color su respectivo identificador cambiando el color del border-left y border-right.

Te dejo un ejemplo en un codepen para que veas si es lo que buscas o entendí mal lo que querías..

http://codepen.io/fede5426/pen/pJxqjz

Saludos