Blindsignals

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

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

Output

follow me on twitter!

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.

Regurgitating old web techniques seems to be somewhat of a trend I've fallen into recently, but as I see questions and non-existent usage of these important and basic techniques I feel obligated to help spread the word once again.

Here are a couple of great articles explaining what CSS sprites are, their purpose, makeup, and why no site has a reason to NOT be using this technique aside from laziness ( which is why my blog doesn't use them, <3 Wordpress ).

- http://www.alistapart.com/articles/sprites
- http://css-tricks.com/css-sprites/

Save the Pandas, take the bus, stick to w3 standards! Ah, who am I kidding.