[mikegerwitz]

I love the creativity that results from CSS' limitations (or, arguably, its flexibility). Neat trick.

It took me a moment to realize exactly what was going on to make this work. For those interested: borders are styled in such a way that they angle toward the edges if the border is large enough:

  \ /
  / \

That gives you four "V"s to work with. Therefore, to create the arrow, you simply need to hide all but the appropriate border. The border around the arrow is accomplished by underlaying another "V".

[stuff4ben]

I still don't get it. What do you mean that "borders are styled in such a way that they angle toward the edges if the border is large enough"? What causes the angle?

[growt]

Take a look at this: http://jtauber.github.com/articles/css-hexagon.html

[avgarrison]

Thanks, I had no clue how this trick worked until I saw your link.

[septerr]

Awesome~ Thank you for posting this link. I had understood the use of wide solid borders with a 0 height and width div, but how the angle was being achieved was perplexing. I was imagining borders as solid rectangles that overlap each other at the corners. This has been a revelation! I have discovered an awesome new power. Thanks!

[salimmadjd]

Another thanks! I was scratching my head for a while.

[etherealG]

thanks, that's a much better explanation

[mikegerwitz]

growt's link does an excellent job of illustrating it.

Ultimately, how the border is joined at the corners is undefined by the specification:

  http://www.w3.org/TR/css3-background/#border-style

> Note: This specification does not define how borders of different styles should be joined in the corner. [...]

Many rendering engines will join borders at an angle, producing those diagonal lines.