Geek Answers Handbook

Changing the shape of a triangle

I am trying to make an active list item as follows:

enter image description here

This is what I have (a blue triangle is a right triangle instead of a blunt 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 to fix it?

ETA I tried the @jlbruno idea (reducing the size of the left border), but when I do this, the triangle lines are not sharp:

enter image description here

ETA Using Conversion: Rotate fixed edges (thanks @jlbruno!) ... but not for IE8. I tried using microsoft matrix conversion filter ( related SO question ), but that didn't help. How do I get this to work in IE8? 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')";
+4
source share
3 answers

Change the border on the left to .guideList .activePointer to something like 7px instead of 11 ... the more you drop this value, the more 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 }
+6
source

Since CSS does not produce the desired result, you may need to do a right alignment for this.

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

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

More articles:


All Articles