css triangle at the end of <li>

Question

I want to achieve something like this

How do I put this triangle css

    .triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 21px 42px 21px 0;
border-color: transparent #eeeeee transparent transparent;
line-height: 0px;
_border-color: #000000 #eeeeee #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    }

to make a triangle at the end of my tab? DEMO http://jsfiddle.net/p69qfqsx/

Answer 1

New CSS for the list:

ul{
    width: 200px;
    border: 1px solid #ccc;
}

li a{
    background-color: #fff;
    padding: 5px 10px;
    display: block;
    position: relative;
    color: #666;
    text-decoration: none;
}

li a:hover, li.active a{
    background-color: #eee;
}

li a:hover:after, li.active a:after{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  /* background-color: #ddd; */
  content: '';
  position: absolute;
  right: -2px;
  top: 0;
}

https://jsfiddle.net/p69qfqsx/2/

Tested just for chrome hope it helps.

Answer 2

Here's the codes I modify for little change:

li a:hover:after{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 10px solid #fff;
  /* background-color: #ddd; */
  content: '';
  position: absolute;
  right: -2px;
  top: 1;
}

I just remove li.active a:after to let pointer makes it. DEMO
But I prefer using what @Andre Morales suggest since it works here.