问题
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.
回答1:
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
回答2:
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.
回答3:
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:
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/
来源：https://stackoverflow.com/questions/3637613/hexagonal-shaped-cells-in-html