3 ms·
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
by mikegerwitz 14y ago
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 14y agoI 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 14y agoTake a look at this: http://jtauber.github.com/articles/css-hexagon.html http://jtauber.github.com/articles/css-hexagon.html
- etherealG 14y agothanks, that's a much better explanation
- avgarrison 14y agoThanks, I had no clue how this trick worked until I saw your link.
- septerr 14y agoAwesome~ 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!
- deleted 14y ago[deleted]
- salimmadjd 14y agoAnother thanks! I was scratching my head for a while.
- mikegerwitz 14y agogrowt'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.