html - 转动水平面包屑导航，垂直

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;
}

对于小于直 Angular 的非常简单的箭头。但恕我直言，它看起来不太好。更好的方法是使用直 Angular 的小箭头并将其放在 block 的中间。特别是如果您需要的不仅仅是一个单词作为文本。