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

我不久前做过类似的事......但我确信不止一种方式。这是我的第一次尝试。

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

Answer 2

或者这个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;
}

用于非常简单的小于直角的箭头。但是恕我直言，它看起来并不好看。更好的方法是使用直角的小箭头并将其放入块的中间。特别是如果你需要更多，那么只有一个单词作为文本。

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

2 个答案: