html中的六角形单元格

Question

是否有设计六角形网格的html模块的方法？类似于蜜蜂蜂巢。这看起来更像是一个css样式任务。

Answer 1

你可以使用一个大的边框，它会倾斜，你可以在一个元素上做出三角形形状，fyi。

例子：http://jsfiddle.net/pAGJG/

所以，你可以用一个三角形的顶部，中部和底部三角形<div class="hexagon">，使多个六边形。

编辑：

更新了例：http://jsfiddle.net/rRDby/

它不是一个完美的六边形，但它给你的，你如何使用它的想法。你可以尽情享受这一切。

编辑＃2：斯图显然已经做了一些@http://www.cssplay.co.uk/menus/hexagon.html

Answer 2

退房Tantek Çelik's work from 2001：他从生成HTML和CSS六边形（其它形状一起）。埃里克迈耶还解决了“倾斜”here的话题。 Lasse Reichstein Nielsen has a straightforward how-to以及walkthrough of generating other shapes这可能是有用的。

Answer 3

只是想抛出这个答案 - 我怀疑这是正确的，但OP的措词含糊不清，而且我不太喜欢其他两个答案 - 他们会觉得不合适像黑客。

如果您需要“六边形网格”的唯一原因是背景，那么您可以使用一些简单的CSS背景平铺来获得正六边形网格。

以一个平铺图像是这样的：

然后，您可以平铺一些简单的CSS：

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

，它应该重复整齐，形成了 “六边形网格”。 例子：http://jsfiddle.net/MqyHv/1/