jquery - 在li下方显示箭头指针，并在事件li上显示不同的颜色指针

我想建立一个看起来像这样的东西。


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


我使用建立清单

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

最佳答案

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

这是此技术如何工作的很好解释：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>

关于jquery - 在li下方显示箭头指针，并在事件li上显示不同的颜色指针，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40680432/