沒有圖像的三角形麪包屑

Question

我創建了帶有CSS的箭頭（三角形）麪包屑，沒有圖像。

jsFiddle

HTML：

<ul class="breadcrumb"> 
    <li>Home</li> 
    <li>First item</li> 
    <li>Second item</li> 
    <li>Last item</li> 
</ul> 

CSS：

.breadcrumb { 
    list-style: none; 
    overflow: hidden; 
} 
.breadcrumb li { 
    background: #F6F6F6; 
    padding: 5px 0 5px 36px; 
    background: #F6F6F6; 
    position: relative; 
    display: block; 
    float: left; 
} 
.breadcrumb li:before { 
    content:" "; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-left: 20px solid #DDDDDD; 
    position: absolute; 
    top: 50%; 
    margin-top: -25px; 
    margin-left: 1px; 
    left: 100%; 
    z-index: 1; 
} 
.breadcrumb li:after { 
    content:" "; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-left: 20px solid #F6F6F6; 
    position: absolute; 
    top: 50%; 
    margin-top: -25px; 
    left: 100%; 
    z-index: 2; 
} 

問題是，當父母的寬度是不夠的，在1行顯示麪包屑，它需要2線（或更多），溢出：隱藏停止工作和不需要的三角形部分可見（http://screencloud.net/v/fQEq）。

有沒有辦法解決這個問題？

Answer 1

嘗試這種風格：

.breadcrumb { 
    list-style: none; 
    overflow: hidden; 
} 
.breadcrumb li:before { 
    border-bottom: 15px solid transparent; 
    border-left: 20px solid #dddddd; 
    border-top: 15px solid transparent; 
    content:" "; 
    display: block; 
    height: 0; 
    left: 100%; 
    margin-left: 1px; 
    margin-top: -15px; 
    position: absolute; 
    top: 50%; 
    width: 0; 
    z-index: 1; 
} 
.breadcrumb li:after { 
    border-bottom: 15px solid transparent; 
    border-left: 20px solid #f6f6f6; 
    border-top: 15px solid transparent; 
    content:" "; 
    display: block; 
    height: 0; 
    left: 100%; 
    margin-top: -15px; 
    position: absolute; 
    top: 50%; 
    width: 0; 
    z-index: 2; 
} 
.breadcrumb li { 
    background: none repeat scroll 0 0 #f6f6f6; 
    display: block; 
    float: left; 
    height: 20px; 
    padding: 5px 0 5px 33px; 
    position: relative; 
} 

希望它能幫助！