Twitter-style user account down arrow

I would like to replicate the down arrow that appears next to a username on several sites such as Twitter.

I believe there are two ways of doing this: create a down arrow image and set it as some sort of background image, or use CSS to create the arrow. I believe Google uses the CSS approach for their top b开发者_高级运维ar.

Which option is preferred and how would I go about doing it?

Twitter is using the ↓ html entity (appending it with css content property). In combination with an image sprite, see here: http://jsfiddle.net/HAZGr/

My advice would be to use an image, it keeps it simple and that way you know it will look the same on all browsers.

http://jqueryui.com/themeroller/

This is how I do it. JQuery is the holy grail of web design.

You can't do it directly with CSS (there are border hacks to create shapes that look like triangles, etc but I don't recommend them).

Instead an approach used now, by google, twitter, etc is to have an image that contains all the little icons, load that once, and offset the image using:

background-image: url("sprite-icons.png");
background-position: -176px -96px;
height: 14px;
width: 14px;