html中的六边形单元格[重复]答案

【问题标题】：hexagonal shaped cells in html [duplicate]html中的六边形单元格[重复]
【发布时间】：2023-03-30 02:00:01
【问题描述】：

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

【问题讨论】：

【解决方案1】：

只是要把这个答案扔出去 - 我怀疑它是正确的，但 OP 的措辞含糊不清，说实话我不喜欢其他两个答案 - 他们感觉像黑客一样不舒服。

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

拍摄这样的平铺图像：

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

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

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

【讨论】：

【解决方案2】：

查看Tantek Çelik's work from 2001：他从 HTML 和 CSS 生成了一个六边形（以及其他形状）。 Eric Meyer 还谈到了“倾斜”here 的话题。 Lasse Reichstein Nielsen has a straightforward how-to 和 walkthrough of generating other shapes 可能有用。

【讨论】：

【解决方案3】：

您可以使用会倾斜的大边框，并且可以在元素上制作三角形，仅供参考。

所以你可以制作一个带有顶部三角形、中间部分和底部三角形的<div class="hexagon">，并制作多个六边形。

编辑：

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

它不是一个完美的六边形，但它让您了解如何使用它。您可以尽情享受自己的乐趣。

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

【讨论】：