如何在CSS中重新创建6个六边形形状背景? [英] How to recreate 6 hexagon shape background in css?

问题描述

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

I am trying to recreate the following background in CSS:

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

Each hexagon should have navigation link inside (6 sections) and this background with nav links should follow the user through all sections in one-page (displaying on the right side of browser). Currently, I am using it as a background image with fixed position attribute and all works well but the only way to display links for me is to place them in fixed width container on fixed width background image.

我了解剪切路径，SVG，但是并非所有浏览器都支持它，所以我的问题是在保持RWD的同时重新创建以下背景并确保每个链接准确位于六边形中心的最佳方法是什么?

I know about clip-path, SVG but it is not supported in all browsers so my question is what is the best way to recreate the following background while maintaining RWD and ensuring each link will be placed exactly in the center of the hexagon?

推荐答案

您是否看过 这个 网站了吗?基本上逐步介绍了如何使用CSS3在100x100 div中创建六边形.

Have you looked into this website yet? Explains basically step by step how to create hexagons out of a 100x100 div using CSS3.

想法是六边形基本上存在于3个HTML div中. 一个用于顶部三角形部分，一个用于中间正方形部分，一个用于底部三角形部分.

The idea is that a hexagon basically exists out of 3 HTML divs. One for the top triangle part, one for the mid square section and one for the bottom triangle part.

.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中.

You can easily put hexagons next to each other to form a hexagon row. To tile the hexagons you need to add the following CSS3 to the hexagon div.

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

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

For all the even hexagon rows use a margin-left of 53px.

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

这篇关于如何在CSS中重新创建6个六边形形状背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！