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

Question

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

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

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

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;
}

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

How to recreate 6 hexagon shape background in css?

html

css

background

shape