CSS3 navigation arrow

Question

I have a navigation that looks like this:

There is an orange arrow on the selected page, which I made using a png image. My question is: can I make this arrow using css / css3? Code:

nav ul li { display: block; padding: 25px 40px 25px; } nav ul li a{ color: #fff; text-decoration: none; font-size: 16px; } nav ul li.selected a{ color: #ef5a29; } nav ul li.selected{ background-image: url('../img/arrow.png'); background-position: right; background-repeat: no-repeat; } 

Answer 1

Using some pseudo-object magic :after , you don’t even need to change html markup =)

You can try something like this:

 nav ul li.selected:after{ content:''; float:right; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-right: 20px solid #ef5a29; } 

or as i did in jsfiddle below:

 nav ul li.selected a:after{ content:''; position:absolute; top:20px; right:0; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-right: 20px solid #ef5a29; } 

Notice that I moved the indent from li and added display:block to a for this example.

here jsfiddle

Answer 2

Yes, absolutely you can make this css3 triangle to check it below. Here is a good example http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Answer 3

Here is an example you could use. You can change .selected to: hover (or copy) to get a hover effect on it, possibly even with a different color on it.

 <style> a.selected .arrow-left{ width: 0; height: 0; /* Border top and bottom define the height of the arrow. */ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:25px solid #EF5A29; /* The width of the arrow 25px and orange color */ margin-left:10px; /* This so the arrow has some room from the text */ display:block; float:right; } ul { border-right: 5px solid #EF5A29; /* The orange border */ display:block; width: 150px; /* so it does not get 100% with automaticly */ } li { list-style: none; /* Remove the list bullits */ } li a{ width: 150px; display: block; padding-right:10px; } </style> <ul> <li><a class="selected">Home<span class="arrow-left"></span></a></li> <li><a>Portfolio<span class="arrow-left"></span></a></li> <li><a>About<span class="arrow-left"></span></a></li> </ul>