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

Question

I want to set up something that looks like this.

So far I can only get this.

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?

Possible duplicate of [CSS: Placing an arrow / triangle with border on the top of my drop down menu](http://stackoverflow.com/questions/29790831/css-placing-an-arrow-triangle-with-border-on-the-top-of-my-drop-down-menu) — Heretic Monkey, Nov 18 '16 at 15:22

score 1 · Answer 1 · answered Nov 18 '16 at 15:20

1

You should use Pseudo-elements to create the little arrow point.

This can be achieved by adding ::after or ::before attributes to your css element.

Take a look at this example: http://www.w3schools.com/howto/howto_css_tooltip.asp

answered Nov 18 '16 at 15:20

Max Taylor

343
3
16

score 1 · Accepted Answer · edited May 23 '17 at 11:59

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

Here is a good explanation of how this techniques works: https://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>

Does just what I need. Thanks – Steve Price Nov 18 '16 at 15:30 — Steve Price, Nov 18 '16 at 15:30

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

2 Answers2