4

I am trying to make the active list item look like this:

enter image description here

This is what I currently have (the blue triangle is a right triangle instead of an obtuse isosceles):

enter image description here

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:

enter image description here

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')";
Community
  • 1
  • 1
dmr
  • 21,811
  • 37
  • 100
  • 138

3 Answers3

6

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
}
Jeff
  • 4,136
  • 23
  • 32
  • Any ideas on how to make the edges of the triangle sharp with CSS? – dmr Jan 30 '13 at 14:37
  • 1
    Looks like it's a bug in Chrome (those pixelated edges)...try adding this to your .activePointer as well: -webkit-transform: rotate(0.05deg); – Jeff Jan 30 '13 at 15:21
  • 1
    more info: http://stackoverflow.com/questions/7394872/how-do-i-make-a-css-triangle-with-smooth-edges – Jeff Jan 30 '13 at 15:23
  • I'm trying to get this to work with IE8 also, and even with the matrix transformation filter in IE ([related SO question](http://stackoverflow.com/questions/4617220/css-rotate-property-in-ie)) it still doesn't look smooth. Any ideas? – dmr Jan 30 '13 at 16:58
  • I don't, unfortunately...anything else from me would just be a google search on how to tackle those aliasing issues. – Jeff Jan 30 '13 at 17:59
0

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;
}
Chris Bier
  • 14,183
  • 17
  • 67
  • 103
  • I'd like to get a CSS only solution – dmr Jan 30 '13 at 16:31
  • Unfortunately I don't think that is possible at the time. This solution will work and technically it is a CSS only solution. – Chris Bier Jan 30 '13 at 21:34
  • Ok I didn't notice that you got the weird edges worked out. I'm glad that you were able to work that out because you're right it is nice not having to use an image :) – Chris Bier Jan 30 '13 at 22:07
0

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>
Mitra Rahimi
  • 1
  • 1