麪包屑CSS V型花紋

我試圖複製位於字形麪包屑代碼：http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html 麪包屑CSS V型花紋

但似乎無法得到它的工作。

我的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>

來源

2015-06-08 James Anderson

爲什麼你不能用'：before'和'：after'在你試圖複製演示所示。你可以將任何你喜歡的內容放到中間部分，'：before'和'：after'只要它是'position：relative'，就會保持'absolute'的內容區域。 –

Hi @ ui-matt Hi @ ui-matt我使用：之前和之後：僞選擇器。那就是問題所在。我使用的是與示例相同的所有代碼。 –

我明白你現在說的話，會看看。 –

一些僞元素工作得很好。

* { 
 
    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

來源

2015-06-08 16:07:41

麪包屑CSS V型花紋

回答

相關問題