如何在HTML中设置十六进制链接网格？

我运行了一个由许多小世界组成的D&D活动，每个小世界相互接触6个，就像在一个六边形网格中一样。事实上，我的（草率的）手绘地图是在十六进制网格打印输出上完成的

我想做的是本质上做一个索引页面，每个小世界都有自己的html页面

我试图弄清楚如何使索引页上的链接保持在十六进制网格布局中

我想我可以用CSS手工完成这一切，但这似乎相当乏味，因为我有大约300个不同的十六进制世界

---

你知道如何加快这个过程吗？我现在能想到的最好的方法是使用一个通用Javascript函数，当它加载到页面时，每个十六进制都会调用它，这将使它定位在正确的位置。

用

映射和
区域
元素尝试一下。您可以对形状使用
poly
，并以这种方式进行处理


使用
地图和
区域
元素尝试此操作。您可以对形状使用
poly
，并以这种方式进行处理


这里只是猜测，但我敢打赌你可以使用CSS变换围绕你的中心点进行6次连续60度旋转

概念证明：

（注意：需要一个webkit浏览器，应该很容易更新到Moz。）
这里只是猜测一下，但我打赌你可以使用CSS变换围绕你的中心点进行6次连续的60度旋转

概念证明：

（注意：需要一个webkit浏览器，应该很容易更新到Moz。）
@lbu:，我相信。想不出一种在html/css中实现这一点的简单方法-使用画布可能是更好的选择。@ibu一个六边形的“网格”：我刚才在看类似的东西，但直接转到SVG，忽略了html。地图不是HTML很擅长描述的东西。@lbu:，我相信。我想在HTML/css中找不到一种不繁琐的方法来实现这一点-使用画布可能是更好的选择。@ibu是六边形的“网格”：我刚才在看类似的东西，但直接转到SVG，忽略了HTML。地图不是HTML很擅长描述的东西。谢谢，我喜欢这个想法，我会马上尝试：）谢谢，我喜欢这个想法，我会马上尝试：）