It is a bit insane, however this allows you to change the color, dimensions, transparency at runtime. A raster doesn't allow you to do this, and, while SVG is scriptable, browser support is spotty.

This hack on the other hand will work in every browser all the way back to Netscape Navigator or earlier.

Better to use Arial unicode characters like &#x25B2 or &#x25BC ASCII encodings and UTF-8 More logical and you can apply all the text styling like color, shadows, skewing, rotate, jquery prepends etc. Put it inside a div and it can go it wherever you want. And it wouldn't be a hack. Some hacks are awesome.. and others are nice playful things but not to be taken with any kind of serious inquiry.

Positioning that accurately would be a massive nightmare due to font rendering differences between OSes and browsers.

I've found that right combination of display: inline-block, position: relative, positioning and margins will get it where you need every time.

What happens when a user agent overrides your preferred font size?

Serious problem. I usually have my page magnification jacked up to reduce eye strain, and it's amazing how many things go wrong on the pages I browse. Don't use a clever hack without testing how it looks after a few cmd-+ (ctrl-+) resizings.

Just don't use font-size and line-heights that references pixels for the <span> containing your arrow and you should be fine. It might not be perfectly aligned, but it won't break.

No, having to open an image editor to create a simple shape you can make in CSS is silly. So is an additional, unnecessary HTTP request.

You can write SVG by hand and embed it in HTML. This requires no use of an external editor nor any extra HTTP request.

  <svg height=10 width=20>
      <polygon fill=red stroke-width=0 
         points="0,10 20,10 10,0" />
  </svg>

If you want to include it in your CSS, you can include it via a data URI, though you need to embed it as an actual XML document (within an HTML document, you can skip the namespace and use HTML syntax which doesn't require quotes around attributes) and can't include line breaks so the syntax is a little bit more cumbersome:

  .triangle {
      background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center;
      width: 20px;
      height: 10px;
  }

Examples of both in action: http://jsfiddle.net/jtR4G/

No, making a shape in CSS is silly. CSS is for styling not drawing.

If you want to make a triangle, without an additional (unnecessary) HTTP request, you should use the appropriate web tech which is SVG.

Just like all other resources you can easily embed an SVG in your HTML if you're being stingy on the requests (which is a good thing).

not all browsers support SVG (namely IE8). for folks who have to support LOB, this is still an issue.

On the other hand, callout arrows seem like a perfectly good case of something that doesn't necessarily need to be present for the site to function.

If your compatibility goals are pixel-perfect compatibility with IE8, this is an issue (and my thoughts and prayers are with you), but if your site simply needs to be functional, callout triangles wouldn't be on my top 10 things to worry about.

Sure, you can treat this as a hack to support older browsers. But with modern browsers, or once those older browsers fall to low enough market share, just embed SVG.

Back in the real world, however, we can't use the ideal solution every time because of browser support. Thus, the easiest, most flexible option is CSS.

It's not really the most flexible option. It allows you to make only a fairly limited type of triangle, only pointing in one of eight directions.

If you want compatibility with older versions of IE, use both SVG and VML, depending on the browser (VML for IE 8 and earlier, SVG for everything else). This gives you a lot more flexibility (you can draw any polygon, arc, or bezier curve that you want), and compatibility all the way back to IE 5.

I'm racking my brain trying to see the 8 directions. I only see 4: up, down, left & right. Care to explain the other 4?

Got it from here: http://apps.eky.hk/css-triangle-generator/

Here's a series of examples showing how it works (not a fun animation like the OP, but a little easier to follow): http://jsfiddle.net/X8gXS/

Basically, you can get any triangle as long as at least one of the sides is horizontal or vertical.

Ah... I see it now. Thanks.