Change the shape of the triangle - css

Question

I am trying to make the active list item look like this:
This is what I currently have (the blue triangle is a right triangle instead of an obtuse isosceles):
Here is my HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law<span class="activePointer"></span></li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is my CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 0px 5px 10px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 11px solid transparent;
border-bottom: 11px solid white;
}
jsFiddle
How do I fix this?
ETA I tried #jlbruno's idea (decreasing the size of the left border), but when I do that the lines of the triangle are not sharp:
ETA Using transform:rotate fixed the edges (thank you #jlbruno!)...but not for IE8. I tried using the microsoft matrix transform filter (related SO question) but it didn't help. How do I get this to work in IE8 also?
Here is the CSS I tried for IE8:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9999996192282494, M12=-0.0008726645152362283, M21=0.0008726645152362283, M22=0.9999996192282494, SizingMethod='auto expand')";

Answer 1

Change the border-left on .guideList .activePointer to something like 7px instead of 11... the more you drop that value, the wider the angle will get.
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 7px solid transparent;
border-bottom: 11px solid white;
-webkit-transform: rotate(0.05deg); // added to smooth edges in Chrome
}

Answer 2

Since CSS is not giving you the desired result, you may have to do a right-aligned background image for this one.
HTML
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
CSS
.guideList .active{
background: url('images/right-arrow.png') #0390d1 center right no-repeat;
color: white;
}

Answer 3

you can use this html And Css for this :
Css:
.Rectangular{
width: 100px;
height: 30px;
text-align: left;
position: relative;
background-color: #0390D1;
color: #fff;
padding-left: 10px;
font: 12px/30px tahoma;
margin-right: 100px;}
.Rectangular>span{
display: inline-block;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #0390D1;
border-left: 30px solid #0390D1;
border-right: 30px solid rgba(0, 0, 0, 0);
border-style: solid;
border-width: 15px;
position: absolute;
right: -29px;
top: 0;
}
HTML :
<div class="Rectangular">Law <span></span></div>