有没有办法设计一个六边形网格的 html 块？类似于蜂巢。这看起来更像是一个 CSS 样式任务。
问问题
21355 次
3 回答
13
您可以使用会倾斜的大边框，并且可以在元素上制作三角形，仅供参考。
示例：http: //jsfiddle.net/pAGJG/
所以你可以<div class="hexagon">用一个顶部三角形、中间部分和底部三角形制作一个，并制作多个六边形。
编辑：
更新示例：http: //jsfiddle.net/rRDby/
它不是一个完美的六边形，但它让您了解如何使用它。您可以尽情享受自己的乐趣。
编辑#2：Stu 显然已经做了一些事情@ http://www.cssplay.co.uk/menus/hexagon.html
于 2010-09-03T16:18:30.843 回答
8
查看Tantek Çelik 2001 年的作品：他从 HTML 和 CSS 生成了一个六边形（以及其他形状）。Eric Meyer在这里也谈到了“倾斜”这个话题。 Lasse Reichstein Nielsen 有一个简单的操作方法以及生成其他可能有用的形状的演练。
于 2010-09-03T16:41:24.117 回答
7
只是要把这个答案扔出去 - 我怀疑它是正确的，但 OP 的措辞含糊不清，说实话我不喜欢其他两个答案 - 他们感觉像黑客一样不舒服。
如果您需要“六边形网格”的唯一原因是为了背景，那么您可以使用一些简单的 CSS 背景平铺来获得规则的六边形网格。
拍摄这样的平铺图像：
然后，您可以平铺一些简单的 CSS：
background: url('hex-tile.png');
它应该整齐地重复以形成“六边形网格”。示例：http: //jsfiddle.net/MqyHv/1/
于 2010-09-03T17:26:57.870 回答