[bgarbiak]

Here's a quick hack for a CSS arrow that casts a shadow. http://jsfiddle.net/BKtnn/1/

Adding border is a bit problematic but I'm sure solution could be found, just a question of few more minutes. Also, it should be doable in IE with filters.

[golden_apples]

That looks surprisingly good for me in Firefox, but from my experiments making these tricks work in production, browser standardization is a long way from the point where we can do this at arbitrary sizes in the real world.

The problem, more than anything, is the way these css-only triangles get aliased. Since they're a side-effect of rendering borders, they never get properly anti-aliased the way fonts and shape edges do, and as a result the edges end up jagged at certain sizes and color combinations.

[btipling]

This solution doesn't work. This has a overlapping shadow issue right around where the arrow pops out of the box. It doesn't look as obvious on that tiny shadow you have, on wider shadows it is glaringly obvious and looks terrible.

[oe]

Yes, the designer in this project naturally wanted both a border and a box shadow. I don't know how to accomplish that in CSS without using additional elements. I'm currently using strategy #1, hoping that nobody notices :)

[pbhjpbhj]

As in the elsewhere linked CSS Hexagon tutorial (see last comment on http://jtauber.github.com/articles/css-hexagon.html) it's noted that there's a hexagon character. Well there are also triangle characters - which you could apply a [or multiple] shadow[s] to.