Has anyone seen the implementation of a hexagon ("honeycomb") in html + css?

Question

css

No, I won't trade honey =)

I decided to implement several rows of combs fitted to each other. Like bee hives.

It would be great if someone suggested an example of the implementation of such a thing in pure css + html. Maybe someone saw something similar?

Answer 1

css-tricks.com/examples/ShapesOfCSS/

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}

Answer 2

Roma Komarov has, in my opinion, what you need .

Answer 3

In general, yes. Seem to be. The ambush is that I will need to show a picture inside the cell + they will go in rows. But yes, there is a foundation. Thank you!

Answer 4

This is more correct. The size of the hexagon is changed by 1 value - font-size. True color changes on hover 2 (

#hexagon {
    font-size: 20px;
    width: 1em;
    height: 0.58em;
    background: #fff;
    color: #fff;
    display: block;
    position: relative;
}

#hexagon:before {
    content: "";
    position: absolute;
    top: -0.25em;
    left: 0;
    width: 0;
    height: 0;
    border-color: inherit;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-bottom: 0.25em solid
}

#hexagon:after {
    content: "";
    position: absolute;
    bottom: -0.25em;
    left: 0;
    width: 0;
    height: 0;
    border-color: inherit;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-top: 0.25em solid;
}

#hexagon:hover {
    background-color: #FFC500;
    color: #FFC500;
}