March 13, 2012
How to add arrow to current page navigation link items?
Question by Jitendra Vyas
Like this. With IE6 compatibility too.
<ul>
<li><a href="/home">Home</a></li>
<li class="selected"><a href="/about/">About</a></li>
<li><a href="/contact-us/">Contact Us</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/gallery/">Gallery</a></li>
<ul>
You can use this jsfiddle example to play with
http://jsfiddle.net/jitendravyas/GN6ed/
and this arrow image http://i.imgur.com/QHFqq.gif
Answer by Starx
You can use CSS3’s transform property to rotate a small box to 45 Deg, and make it look like an arrow.
.arrow {
width: 30px;
height: 30px;
background: #000;
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(45deg); /* FF3.5+ */
-ms-transform: rotate(45deg); /* IE9 */
-o-transform: rotate(45deg); /* Opera 10.5 */
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
zoom: 1;
}
Here is a demo
Update 2: Here is the PURE CSS SOLUTION with the border too.
