Html 如何在css中重新创建6个六边形形状背景？

我正在尝试用CSS重新创建以下背景：

每个六边形内应有导航链接（6个部分），带有导航链接的背景应跟随用户在一个页面中浏览所有部分（显示在浏览器的右侧）。目前，我使用它作为一个固定位置属性的背景图像，所有的工作都很好，但唯一的方式来显示链接，我是把他们在固定宽度的背景图像固定宽度容器

我知道clip path，SVG，但并非所有浏览器都支持它，所以我的问题是，在维护RWD并确保每个链接精确放置在六边形中心的同时，重建以下背景的最佳方法是什么？

您查看过网站了吗？基本上一步一步地解释如何使用CSS3从100x100 div创建六边形

其思想是三个HTML div中基本上存在一个六边形。 一个用于顶部三角形部分，一个用于中间方形部分，一个用于底部三角形部分

.hex .top {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex .middle {
    width: 104px;
    height: 60px;
    background: #6C6;
}
.hex .bottom {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

您可以轻松地将六边形彼此相邻以形成六边形行。 要平铺六边形，需要将以下CSS3添加到hexagon div

.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -26px;
}

对于所有偶数六边形行，使用53px的左边距

.hex-row.even {
    margin-left: 53px;
}

---

虽然链接的文档可以有答案，但是想法是在答案中包含所有相关的细节，并保留链接作为参考，我对stackoverflow是新手。更新了我的帖子。这个答案将所有坐标舍入到最接近的整数。我想知道你是否可以通过使用十进制值来获得更高的精度。