jquery - 面包屑 V 形 CSS

Question

我正在尝试复制位于: http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html 的 V 形面包屑代码

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

我的 HTML 和 CSS 可以在 CodePen 中找到: http://codepen.io/anon/pen/eNWrLj

基本上，发生的事情是，我试图将左侧三 Angular 形切口添加到面包屑中，但它不起作用。

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

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