CSS Arrows / Pointer Tutorial
Posted by chelfers | Posted in CSS, HTML, Web | Posted on 02-12-2009
Tags: css arrow, css pointer, css triangle
2
Arrows, pointers, triangles, whatever you wish to call this technique you will end up making a pure CSS arrow; graphics are forbidden!
The process is actually extremely simple, the basic idea is that you you set a nice fat border then remove the side you wish the arrow to point to.
Example Code
border: 8px solid white;
border-width: 8px 0 8px 8px;
border-color: white red;
font-size: 0; /* needed for IE browsers, if this isn't set to 0 you will end up with a trapezoid */
line-height: 0;
}
Output
So that works fairly nice, but we want to actually do something useful with the arrow like pointing to a link; using a div just complicates the job as we now have to deal with floating. If we change the first example's tag from div to span and remove the font-size property, or set a width to it you will notice we get a trapezoid shape. Let's try and get this fix0red!
Example Code
border: 8px solid white;
border-width: 8px 0 8px 8px;
border-color: white red;
font-size: 0; /* needed for IE browsers, if this isn't set to 0 you will end up with a trapezoid */
line-height: 0;
display: inline-block;
}
Output
The possibilities are fairly large with this technique and it almost certainly shuts out any previous requirement of an image to get the same functionality. With positioning properties we can move our arrow anywhere within a block element to make beautiful pointers on menu items, we can make pointing list items, link pointers, and even faux element wrapping!
Go and make peace with your GIFs and PNGs, they are going to hate you after this.
So what about up and down arrows ? How do I do that in pure css ?
Up and down arrows are handled the same way, the only difference is you change the border-width property to 0 8px 8px 8px or 8px 8px 0 8px and flip the border-color to red white.
Sorry for the late reply, never got a message that this was posted.