News for hackers. Stuff that matters.
Re:CSS arrow please by mikegerwitz on Wednesday May 09, 2012 @08:53AM (#3948284)
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".
Re:CSS arrow please by stuff4ben on Wednesday May 09, 2012 @09:23AM (#3948389)
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?
Re:CSS arrow please by growt on Wednesday May 09, 2012 @09:25AM (#3948396)
Re:CSS arrow please by avgarrison on Wednesday May 09, 2012 @10:11AM (#3948631)
Thanks, I had no clue how this trick worked until I saw your link.
Re:CSS arrow please by septerr on Wednesday May 09, 2012 @03:58PM (#3950197)
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!
Re:CSS arrow please by salimmadjd on Wednesday May 09, 2012 @07:11PM (#3950982)
Another thanks! I was scratching my head for a while.
Re:CSS arrow please by etherealG on Wednesday May 09, 2012 @10:09AM (#3948621)
thanks, that's a much better explanation
Re:CSS arrow please by mikegerwitz on Wednesday May 09, 2012 @09:33AM (#3948435)
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.