html中的六边形单元格

Question

有没有办法设计一个六边形网格的html块？类似于蜜蜂蜂巢.这看起来更像是一个CSS样式任务.

Answer 1

你可以使用一个倾斜的大边框,你可以在一个元素上制作三角形,fyi.

示例:http://jsfiddle.net/pAGJG/

所以你可以制作一个<div class="hexagon">顶部三角形,中间部分和底部三角形,并制作多个六边形.

编辑:

更新示例:http://jsfiddle.net/rRDby/

它不是一个完美的六角形,但它让你了解如何使用它.你可以拥有自己的乐趣.

编辑#2:Stu显然已经做了一些事情@ http://www.cssplay.co.uk/menus/hexagon.html

Answer 2

查看TantekÇelik从2001年开始的工作:他从HTML和CSS生成六边形(以及其他形状).Eric Meyer也在这里讨论了"倾斜"这个话题. Lasse Reichstein Nielsen有一个简单的操作方法,以及生成其他可能有用的形状的演练.

Answer 3

只是把这个答案扔出去 - 我怀疑这是正确的答案,但OP的措词含糊不清,说实话我不喜欢其他两个答案 - 他们觉得像黑客一样令人不舒服.

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

拍摄像这样的可图块化图像:

然后你可以平铺一些简单的CSS:

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

它应该整齐地重复形成一个"六边形网格".示例:http://jsfiddle.net/MqyHv/1/