hexagonal shaped cells in html

Abu picture Abu · Sep 3, 2010 · Viewed 20.7k times · Source

Is there was a way to design a html block that is a hexagonal grid? Similar to that of a Bee hive. This looks more like a css styling task.

Answer

meder omuraliev picture meder omuraliev · Sep 3, 2010

You can use a large border which will get slanted and you can make triangular shapes on an element, fyi.

Example: http://jsfiddle.net/pAGJG/

So you can make a <div class="hexagon"> with a top triangle, middle section, and bottom triangle, and make multiple hexagons.

EDIT:

Updated example: http://jsfiddle.net/rRDby/

It isn't a perfect hexagon but it gives you an idea of how you can use it. You can have the fun all to yourself.

EDIT #2: Stu has apparently already done something @ http://www.cssplay.co.uk/menus/hexagon.html