如何在CSS中重建6个六边形背景？

Question

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

每个六边形内部都应有导航链接（6个部分），带有导航链接的背景应该跟随用户浏览一页中的所有部分（显示在浏览器的右侧）。目前，我使用它作为具有固定位置属性的背景图像并且一切正常但是显示链接的唯一方法是将它们放置在固定宽度背景图像上的固定宽度容器中。

我知道剪辑路径，SVG但是并不是所有浏览器都支持它，所以我的问题是在保持RWD的同时重建以下背景的最佳方法是什么，并确保每个链接都准确地放在六边形的中心？

Answer 1

你有没看过this网站？基本上逐步解释如何使用CSS3从100x100 div中创建六边形。

这个想法是一个六边形基本上存在于3个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添加到六边形div。

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

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

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