如何在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;
}