9 ms·
CSS Hexagon Tutorial
- cheald 15y agoIf 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.
- jawns 15y agoAnd then, of course, there's this: http://www.fileformat.info/info/unicode/char/2b22/index.htm http://www.fileformat.info/info/unicode/char/2b22/index.htm
- jtauber 15y agohaha! I might have to add mention of that to my article too :-)
- abahgat 15y agoThat's neat. Too bad it doesn't work on Windows, though.
- windsurfer 15y agoWorks fine for me. Windows 7 64-bit, Firefox 11.0
- m0shen 15y agoI have the exact same and I don't see it.
- jenius 15y agoThis is the winner. Clean edges, simple implementation.
- kzrdude 15y agoYou can't trust the size of a font symbol though.
- gipsyking 15y agoNot rendering for me, running Windows 7 and chrome
- michaelcampbell 15y agoWin 7 + chrome here too; the URL of the parent of your note renders it ok, but not on the OP for me.
- danielhellier 15y agoCompatibility with unicode is strictly the font? If the font is installed it doesn't matter the machine, doctype or browser?
- gavinlynch 15y agoTantek Ç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 http://tantek.com/CSS/Examples/polygons.html
- jtauber 15y agoNice! His hexagon appears to only need two elements too.
- cheeaun 15y agoYea, I remember this one: http://tantek.com/map.html http://tantek.com/map.html Wayback: http://web.archive.org/web/20020321021851/http://tantek.com/map.html http://web.archive.org/web/20020321021851/http://tantek.com/...
- RandomJoeHacker 15y agoI tried to implement my own version of such menu here: http://barabbas.github.com/blog/sandbox/hexmenu/hexmenu.html http://barabbas.github.com/blog/sandbox/hexmenu/hexmenu.html It is very Q'n'D and cumbersome but at least it has novelty value.
- spystath 15y agoThese 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?
- dinedal 15y agoIs it possible to bind an image to these instead of a straight color?
- smickie 15y agoFunny 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#buttonDropdowns 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.
- duopixel 15y agoThe 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/ http://lab.smashup.it/flip/ And here someone produced a clever 3d animation using borders: http://www.uselesspickles.com/triangles/ http://www.uselesspickles.com/triangles/
- glenntzke 15y agoThe 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 http://www.ragestorm.net/erezsh/parrot.html
- deleted 15y ago[deleted]
- creamyhorror 15y agoAnd there's this: http://css-tricks.com/examples/ShapesOfCSS/ http://css-tricks.com/examples/ShapesOfCSS/ Includes the infinity symbol, an egg, Pac-man, and the ever fun Yin-Yang symbol.
- waferlove 15y agoClever. I'm going to play around with this now.