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

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

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!

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

thanks, that's a much better explanation

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.