面包屑雪佛龙CSS

Question

我试图复制位于http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html的雪佛龙面包屑代码

但似乎无法让它发挥作用。

我的HTML＆amp;可以在CodePen找到CSS： http://codepen.io/anon/pen/eNWrLj

基本上，我正在尝试将左侧三角形切口添加到面包屑中，但它只是不起作用。

由于某种原因，抠图被扔到屏幕的左侧，而不是它应该在的位置。

我也不能使用左，右，上，任何一个来定位左侧三角形切口，因为面包屑的内容是随机生成的。可能是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