How to recreate 6 hexagon shape background in css?

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 2 years ago.

I am trying to recreate the following background in CSS:

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.

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?

Answer 1

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

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

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

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

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