CSS Adding a triangle

Question

I have an tag, with the following markup:

#leftMenu ul li a   {color: #111; text-decoration: none; display: block;}

And I want to be able to hover over it, and display a triangular end. Similar to this shape:

http://www.promotionalpromo.com/Upfiles/Prod_v/1-7-8-x-2-7-8--Long-Arrow_2010017055476.jpg

But not with the same dimensions, more along the lines of: width: 200px; height: 20px;

Either I chop the two ends, (border-top-right and border-bottom-right) or I add css on with :after, however I need all this to happen when the user hovers of the tag.

How can I achieve this?

eric.itzhak · Accepted Answer · 2012-11-23 13:21:36Z

1

I found this site very usefull : http://apps.eky.hk/css-triangle-generator/

when i needed to create triangles. it generates a triangle for you.

Now after u generate the triangle, all u need to do is use :before or :after on your desired element to make it work, in your case hover as well.

answered Nov 23, 2012 at 13:21

eric.itzhak

16.2k28 gold badges96 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chud37 Over a year ago

But you cannot write 'a:hover:after' can you?

eric.itzhak Over a year ago

you can, look here : stackoverflow.com/questions/5226764/…

eric.itzhak Over a year ago

this tutorial should help u get the hang of it : speckyboy.com/2012/02/15/how-to-build-a-stylish-css3-search-box

Chud37 · Accepted Answer · 2012-11-23 13:45:36Z

1

Just for reference this is how I did it:

#leftMenu ul li a   {color: #111; text-decoration: none; display: block; position: relative;}
#leftMenu ul li a:hover {color: #555; text-decoration: underline; background: #EEE; }
#leftMenu ul li a:hover:after 
            {
                content:"";
                float:right;
                position:absolute; top:0; right:-12px; width:0; height:0;
                border-style: solid;
                border-width: 13px 0 12px 12px;
                border-color: transparent transparent transparent #EEE;
            }

answered Nov 23, 2012 at 13:45

Chud37

5,03714 gold badges69 silver badges130 bronze badges

Collectives™ on Stack Overflow

CSS Adding a triangle

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related