jquery - 在 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 本身内，而不是在其下方。我确实考虑过只应用整个背景图像而不是尝试添加指针，但它必须能够随着视口(viewport)的改变而调整大小。最好的解决方案是什么？

Answer 1

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

这里很好地解释了这种技术的工作原理: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>