Hacker News Reader

Comment by stuff4ben | Hacker News Reader

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?

View on HN

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

thanks, that's a much better explanation

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.

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.

Reply on news.ycombinator.com