hexagonal shaped cells in html

Question

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.

This related question [Grid of hexagons with tag](http://stackoverflow.com/questions/26114920/hexagon-patern-with-img-tag) show a way to achieve your aim. — web-tiki, Nov 26 '14 at 15:21

meder omuraliev · Answer 1 · 2010-09-03T16:34:34.627

13

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

edited Sep 03 '10 at 16:34

answered Sep 03 '10 at 16:18

meder omuraliev

183,342
71
393
434

3

Can the downvoter please explain yourself? – meder omuraliev Sep 03 '10 at 21:11
+1 for Stu! Is there anything that man *hasn't* done? :-) – Potherca Oct 13 '11 at 21:39
These links show how to make triangles or individual hexagons, but the question asked for hex grid like a honeycome. See @ScottS's answer – Rich May 06 '13 at 14:27

score 8 · Answer 2 · answered Sep 03 '10 at 16:41

Check out Tantek Çelik's work from 2001: he generates a hexagon (along with other shapes) from HTML and CSS. Eric Meyer also addressed the topic of "slants" here. Lasse Reichstein Nielsen has a straightforward how-to as well as a walkthrough of generating other shapes which might be of use.

score 6 · Answer 3 · edited Feb 08 '17 at 14:30

6

Just going to throw this answer out there - I doubt it's the correct one, but the OP's phrasing is vague, and truthfully I don't like the other two answers - they feel uncomfortably like hacks.

If the only reason you need the "hexagonal grid" is for the background, then the you can use some simple CSS background tiling to get a regular hexagon grid.

Taking a tileable image like this:

alt text

You can then tile some simple CSS:

background: url('hex-tile.png');

and it should repeat neatly to form a "hexagonal grid". Example: http://jsfiddle.net/MqyHv/1/

edited Feb 08 '17 at 14:30

Community

1
1

answered Sep 03 '10 at 17:26

Yi Jiang

49,435
16
136
136

1

.. but what if you need to put text in each cell? I think that's what the question was asking for. – Rich May 06 '13 at 14:28

hexagonal shaped cells in html

3 Answers3

Linked