在li下方显示箭头指针，在活动li上使用不同的颜色指针

Question

我想设置一些看起来像这样的东西。

到目前为止，我只能得到这个。

我使用

建立了一个列表

<ul id="etabs">
<li class="tab left"><a href="#newCarousel">New Arrivals</a></li>
<li class="tab"><a href="#popularCarousel">Featured Products</a></li>
<li class="tab"><a href="#offersCarousel">Offers</a></li>
</ul>

用

设置样式

ul#etabs {list-style:none; max-width:100%; background-color:#fff; margin:0 auto; font-size:1.2em; height:61px; padding:0;}
ul#etabs li {float:left; width:33.3333%; position: relative;text-align: center;}
ul#etabs li a {display:block; text-transform:uppercase; text-decoration:none; color:#000; padding:20px 0;}

ul#etabs li .active {background-color: #a6d120; position: relative;}
ul#etabs li a.active {color:#fff;}

我尝试在li中添加背景图片，但我只能将它放在li本身内，而不是在它下面。我确实考虑过只应用整个背景图像而不是尝试添加指针，但它必须能够在视口更改时调整大小。 什么是最好的解决方案？

Answer 1

您应该使用Pseudo-elements来创建小箭头点。

这可以通过在你的css元素中添加:: after或:: before属性来实现。

看一下这个例子：http://www.w3schools.com/howto/howto_css_tooltip.asp

Answer 2

您可以通过在空伪元素上使用边框来创建三角形。

以下是对此技术如何运作的一个很好的解释：https://stackoverflow.com/a/7073558/746736

或者如果你感到懒惰，有online triangle generators。

调整数字以符合您的设计。

border-style: solid;
border-width: 20px 15px 0 15px;
border-color: #fff transparent transparent transparent;

然后可以将其定位在li下方。

ul#etabs {list-style:none; max-width:100%; background-color:#fff; margin:0 auto; font-size:1.2em; height:61px; padding:0;}
ul#etabs li {float:left; width:33.3333%; position: relative;text-align: center;}
ul#etabs li a {display:block; text-transform:uppercase; text-decoration:none; color:#000; padding:20px 0;}

ul#etabs li.active {background-color: #a6d120; position: relative;}
ul#etabs li a.active {color:#fff;}

body {
  background: #f2f2f2;
}

ul#etabs li:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 15px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  bottom: -19px;
  left: 50%;
  margin-left: -15px;
}
ul#etabs li.active:after {
  border-color: #a6d120 transparent transparent transparent;
}

<ul id="etabs">
  <li class="tab left active"><a href="#newCarousel">New Arrivals</a>
  </li>
  <li class="tab"><a href="#popularCarousel">Featured Products</a>
  </li>
  <li class="tab"><a href="#offersCarousel">Offers</a>
  </li>
</ul>