Breadcrumb Шевроны CSS

Question

Я пытаюсь скопировать код шеврона, расположенный в строку навигации: http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html

Но не могу заставить его работать.

Мой HTML & CSS можно найти на CodePen здесь: http://codepen.io/anon/pen/eNWrLj

В принципе, то, что происходит, является то, что я пытаюсь добавить левую боковую треугольную выемку в сухарях, но это просто ISN Не работаем.

Вырез вызывается в левой части экрана по какой-то причине, а не там, где он должен быть.

Я также не могу использовать левый, правый, верхний, любой из них, чтобы расположить левый треугольный вырез, потому что содержимое панировочных сухарей генерируется случайным образом. Может быть 1 слово, может быть 3+ слова. Никогда не знать. Позиционирование его статически было бы просто глупо и беспорядочно.

Любые идеи?

спасибо.

<div class="row"> 
    <div class="breadcrumbDiv col-lg-12" id="category_bread_crumb"> 
     <ul class="breadcrumb"> 
      <li><a href="categories?catid=">Home</a> </li> 
      <li><a href="/Fashion-and-Apparel">Fashion and Apparel</a> 
      </li> 
      <li class="active">Shirts</li> 
     </ul> 
    </div> 
</div> 

Answer 1

Несколько псевдоэлементов прекрасно работают.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#stages { 
 
    margin:50px; 
 
} 
 

 
ul, li { 
 
    padding: 0; 
 
    list-style:none; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin:0 .5em ; 
 
} 
 

 
a { 
 
    display: block; 
 
    height:2em; 
 
    line-height:2em; 
 
    text-decoration: none; 
 
    background-color: lightblue; 
 
    padding:0 1em; 
 
} 
 

 
li:before, 
 
li:after { 
 
    position: absolute; 
 
    content:""; 
 
    top:0; 
 
    width:0; 
 
    height:0; 
 
} 
 

 
li:after { 
 
    left:100%; 
 
    border: 1em solid transparent; 
 
    border-left-color:lightblue; 
 
} 
 

 
li:before { 
 
    right:calc(100% - 1em); 
 
    border: 1em solid lightblue; 
 
    border-left-color:transparent; 
 
} 
 

 
li.current:after { 
 
    border-left-color:#00f; 
 
} 
 

 
li.current:before { 
 
    border: 1em solid blue; 
 
    border-left-color:transparent; 
 
} 
 

 
li:first-of-type:before { 
 
    border-left-color:lightblue; 
 
} 
 

 
li.current:first-of-type:before { 
 
    border-left-color:blue; 
 
} 
 

 
li.current a { 
 
    background-color: #00f; 
 
    color:white; 
 
}

<div id='stages'> 
 
<nav role='navigation'> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Some Very Very Long List Item</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
    </ul> 
 
</nav> 
 
</div>

Codepen Demo 1

Codepen Demo 2 now with added icons