CSS Hexagon Tutorial

Tantek Çelik did some of this experimentation, amazingly, over a decade ago (2001). Right-click for his CSS:<p>"A Study of Regular Polygons" <a href="http://tantek.com/CSS/Examples/polygons.html" rel="nofollow">http://tantek.com/CSS/Examples/polygons.html</a>

And then, of course, there's this:<p><a href="http://www.fileformat.info/info/unicode/char/2b22/index.htm" rel="nofollow">http://www.fileformat.info/info/unicode/char/2b22/index.htm</a>

If you're willing to sacrifice IE7 support, you can accomplish that all with one element per haxagon, as well, by utilizing the :before and :after pseudo-elements.

The kind of hacks achievable with css borders is amazing. Here is a jQuery plugin that does a 3d flip using borders:<p><a href="http://lab.smashup.it/flip/" rel="nofollow">http://lab.smashup.it/flip/</a><p>And here someone produced a clever 3d animation using borders:<p><a href="http://www.uselesspickles.com/triangles/" rel="nofollow">http://www.uselesspickles.com/triangles/</a>

These tricks with CSS are all nice. Pardon my ignorance, though, if one needs a way to draw shapes wouldn't something like SVG be more suitable for these sort of tasks? I know it is probably not as easy as with CSS (support is more limited as well), but isn't this example kinda like abusing the limits of the stylesheets?

And there's this:<p><a href="http://css-tricks.com/examples/ShapesOfCSS/" rel="nofollow">http://css-tricks.com/examples/ShapesOfCSS/</a><p>Includes the infinity symbol, an egg, Pac-man, and the ever fun Yin-Yang symbol.

Funny this came up, I was just looking at how Twitter's bootstrap creates the "caret" drop-down arrow.<p><a href="http://twitter.github.com/bootstrap/components.html#buttonDropdowns" rel="nofollow">http://twitter.github.com/bootstrap/components.html#buttonDr...</a><p>If you inspect the down arrow it's created in the same way. Interesting.<p>I guess it's better than an extra image request if you don't mind the style.

The power of the hexagon in css! I've seen some interesting art built out of triangles and render very well in all browsers and together with hexagons you can build complex geo art. Here's a favorite of mine: <a href="http://www.ragestorm.net/erezsh/parrot.html" rel="nofollow">http://www.ragestorm.net/erezsh/parrot.html</a>

Is it possible to bind an image to these instead of a straight color?

Clever. I'm going to play around with this now.