Steve Price Steve Price - 22 days ago 12
CSS Question

Show arrow pointer below li with different colour pointer on active li

I want to set up something that looks like this.
What I want to achieve

So far I can only get this.
what I've got

I built a list using

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


And styled it with

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


I tried adding a background image to the li but I can only position it within the li itself, not below it. I did consider just applying a whole background image instead of trying to add the pointers, but it has to be able to resize as viewport is changed.
What is the best solution to this?

Answer

You can create the triangle shape by using borders on an empty pseudo element.

Here is a good explanation of how this techniques works: http://stackoverflow.com/a/7073558/746736

Or if you are feeling lazy, there are online triangle generators.

Adjust the figures to match your design.

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

This can then be positioned below your 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>