0

这可能是一个但太多的要求，但我在这里达到了我的极限。

我有这个 ( 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;
}
4

2 回答 2

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

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

于 2013-10-31T06:26:56.433 回答
1

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

Codepen 演示

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;
}
于 2013-10-30T13:39:33.300 回答