CSS Hexagon Tutorial | Hacker News Reader

CSS Hexagon Tutorial

jtauber.github.com

90 pointsjtauber27 comments

Open articleView on HN

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

Yea, I remember this one: http://tantek.com/map.html

Wayback: http://web.archive.org/web/20020321021851/http://tantek.com/...

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.

Nice! His hexagon appears to only need two elements too.

And then, of course, there's this:

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

Not rendering for me, running Windows 7 and chrome

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

You can't trust the size of a font symbol though.

Compatibility with unicode is strictly the font? If the font is installed it doesn't matter the machine, doctype or browser?

haha! I might have to add mention of that to my article too :-)

That's neat. Too bad it doesn't work on Windows, though.

Works fine for me. Windows 7 64-bit, Firefox 11.0

I have the exact same and I don't see it.

This is the winner. Clean edges, simple implementation.

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.

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

now updated thanks to Will Hardy

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/

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?

Yes, svg would be more compact: http://jsfiddle.net/fgu5R/

Can you apply css transformations to that?

Yes you can http://jsfiddle.net/ReZbM/

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.

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

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.

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

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

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

Reply on news.ycombinator.com