水平面包屑導航，垂直

Question

這可能是一個但是太多問，但我在這裏我的限制。

我有這個（http://jsfiddle.net/3whTa/）一塊CSS，它創建了一個箭頭水平面包屑導航。

我想要做的是將其轉換爲垂直。如箭頭所示，箭頭指向彼此，但文本仍然是水平的（然後必須調整大小）。

這怎麼可能？另外，我試着四處搜尋這樣的導航，但我還沒有找到任何東西，所以在正確的方向上的一點將是一樣有幫助。

你可以看到它在行動上，並在上面的鏈接的jsfiddle的代碼，但我將其粘貼在這裏還有：

HTML

<ul id="breadcrumbs-two"> 
    <li><a href="#">one</a></li> 
    <li><a href="#">two</a></li> 
    <li><a href="#">three</a></li> 
    <li><a href="#">four</a></li> 
</ul> 

CSS

#breadcrumbs-two{ 
    overflow: hidden; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#breadcrumbs-two li{ 
    float: left; 
    margin: 0 .5em 0 1em; 
} 

#breadcrumbs-two a{ 
    background: #ddd; 
    padding: .7em 1em; 
    float: left; 
    text-decoration: none; 
    color: #444; 
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
    position: relative; 
} 

#breadcrumbs-two a:hover{ 
    background: #99db76; 
} 

#breadcrumbs-two a::before{ 
    content: ""; 
    position: absolute; 
    top: 50%; 
    margin-top: -1.5em; 
    border-width: 1.5em 0 1.5em 1em; 
    border-style: solid; 
    border-color: #ddd #ddd #ddd transparent; 
    left: -1em; 
} 

#breadcrumbs-two a:hover::before{ 
    border-color: #99db76 #99db76 #99db76 transparent; 
} 

#breadcrumbs-two a::after{ 
    content: ""; 
    position: absolute; 
    top: 50%; 
    margin-top: -1.5em; 
    border-top: 1.5em solid transparent; 
    border-bottom: 1.5em solid transparent; 
    border-left: 1em solid #ddd; 
    right: -1em; 
} 

#breadcrumbs-two a:hover::after{ 
    border-left-color: #99db76; 
} 

#breadcrumbs-two .current, 
#breadcrumbs-two .current:hover{ 
    font-weight: bold; 
    background: #99db76; 
} 

#breadcrumbs-two .current::after{ 
    border-left-color: #99db76; 
} 
#breadcrumbs-two .current::before{ 
    border-color: #99db76 #99db76 #99db76 transparent; 
} 

Answer 1

或這個CSS：

ul 
{ 
padding-left:0; 
width:100px; 
} 

ul li 
{ 
display:block; 
height:30px; 
margin-bottom:8px; 
position:relative; 
background:gray; 
} 

ul li:before 
{ 
content:''; 
top:-1px; 
left:10px; 
border:1px solid blue; 
border-width:4px 40px 20px 40px; 
border-color: white transparent transparent transparent; 
position:absolute; 
} 

ul li:first-child:before 
{ 
border:none; 
} 

ul li:after 
{ 
content:''; 
bottom:-26px; 
left:10px; 
border:1px solid blue; 
border-width:6px 40px 20px 40px; 
border-color: red transparent transparent transparent; 
position:absolute; 
} 

ul li:last-child:after 
{ 
border:none; 
} 

非常簡單的箭頭小於直角。但恕我直言，它看起來不錯。最好使用直角小箭頭，並將其放在塊的中間。尤其是如果你需要更多，那麼只有一個字作爲文本。

Answer 2

我之前做過這樣的事情......但我確定有不止一種方法。這是我的第一次嘗試。

Codepen Demo

HTML

<nav role='navigation'> 
    <ul> 
    <li><a href="#">Step 1</a></li> 
    <li><a href="#">Step 2</a></li> 
    <li><a href="#">Step 3</a></li> 
    <li><a href="#">Step 4</a></li> 
    </ul> 
</nav> 

CSS

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

ul { 
    list-style:none; 
    margin:25px; 
} 

li { 
    text-align:center; 
    margin-bottom:25px; 
    position:relative; 
    background:darkblue; 
    width:50px; 
} 

li:hover { 
    background:green; 
} 

a { 
    text-decoration:none; 
    font-weight:bold; 
    display:block; 
    color:white; 
    height:50px; 

    line-height:75px; 
    position:relative; 
    font-size:0.75em; 

} 

li:before, 
li:after { 
    position:absolute; 
    content:""; 
    left:0; 
    border:25px solid transparent; 
    height:0; 
    width:0; 
    z-index: 25; 
} 

li:before { 
    top:0; 
    border-top-color:white; 
} 

li:after { 
    top:100%; 
    border-top-color:darkblue; 
} 

li:hover:after { 
    border-top-color:green; 
}