

CSS Hexagon Tutorial - jtauber
http://jtauber.github.com/articles/css-hexagon.html

======
gavinlynch
Tantek Çelik did some of this experimentation, amazingly, over a decade ago
(2001). Right-click for his CSS:

"A Study of Regular Polygons" <http://tantek.com/CSS/Examples/polygons.html>

~~~
cheeaun
Yea, I remember this one: <http://tantek.com/map.html>

Wayback:
[http://web.archive.org/web/20020321021851/http://tantek.com/...](http://web.archive.org/web/20020321021851/http://tantek.com/map.html)

~~~
RandomJoeHacker
I tried to implement my own version of such menu here:
<http://barabbas.github.com/blog/sandbox/hexmenu/hexmenu.html>

It is very Q'n'D and cumbersome but at least it has novelty value.

------
jawns
And then, of course, there's this:

<http://www.fileformat.info/info/unicode/char/2b22/index.htm>

~~~
gipsyking
Not rendering for me, running Windows 7 and chrome

~~~
michaelcampbell
Win 7 + chrome here too; the URL of the parent of your note renders it ok, but
not on the OP for me.

------
cheald
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.

~~~
jtauber
yeah, I was thinking of exploring that next and will update the page when I do
so.

~~~
jtauber
now updated thanks to Will Hardy

------
duopixel
The kind of hacks achievable with css borders is amazing. Here is a jQuery
plugin that does a 3d flip using borders:

<http://lab.smashup.it/flip/>

And here someone produced a clever 3d animation using borders:

<http://www.uselesspickles.com/triangles/>

------
spystath
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?

~~~
duopixel
Yes, svg would be more compact: <http://jsfiddle.net/fgu5R/>

~~~
NHQ
Can you apply css transformations to that?

~~~
duopixel
Yes you can <http://jsfiddle.net/ReZbM/>

------
creamyhorror
And there's this:

<http://css-tricks.com/examples/ShapesOfCSS/>

Includes the infinity symbol, an egg, Pac-man, and the ever fun Yin-Yang
symbol.

------
smickie
Funny this came up, I was just looking at how Twitter's bootstrap creates the
"caret" drop-down arrow.

[http://twitter.github.com/bootstrap/components.html#buttonDr...](http://twitter.github.com/bootstrap/components.html#buttonDropdowns)

If you inspect the down arrow it's created in the same way. Interesting.

I guess it's better than an extra image request if you don't mind the style.

------
glenntzke
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:
<http://www.ragestorm.net/erezsh/parrot.html>

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

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

