This is the way to do it, until the graphics guy wants the box to have a drop shadow. The pseudo elements' shadow is square, so your options are either to hope that nobody notices that the arrow doesn't have a shadow (like in this example), or to use an image for the arrow.
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.
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.
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.
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 :)
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.
The gathered troops here were all cooing at this demo until the drop shadow was noticed as absent from the arrow. A real shame (although obviously the box-shadow being bounded by the rectangle makes it impossible to do this way).
Maybe it's time to propose a mask-shadow property?
This sort of thing used to happen a lot at an Android app company I worked for. It would be easier and cleaner to implement something like a button background in XML, but it wouldn't look nearly as good as a button produced using real graphics. It wasn't just looks either, they were less usable in that case. If a button doesn't look 3D due to being limited to a simple linear gradient or something then users are less likely to click it, and we did have user testing reports of people mistaking the biggest buttons that we wanted people to click most for section titles. So even if a shadow can be pulled off, what else is missing that a raster graphics solution would include. ;/
You know, not having a shadow on the Arrow (if arrow is on bottom) kind looks like it's popping off the page then, at a slight angle. I don't mind it - tho obviously not for every use.
