DEV Community 👩‍💻👨‍💻

Cover image for How To Make a Hexagon honeycomb With CSS
Nazanin Ashrafi
Nazanin Ashrafi

Posted on • Originally published at nazanin-ashrafi.hashnode.dev

How To Make a Hexagon honeycomb With CSS

I used to think making honeycombs is hard, but it really isn't.

In this article i'll show you how to make a honeycomb.

Before we get started, you need to know that honeycomb is basically made of a rectangle and two triangles .

image.png

1. First you need to make a rectangle :

.honeycomb {
    width: 57px;
    height: 100px;
    background-color: #3d3d3d;
    transform: rotate(90deg);
}
Enter fullscreen mode Exit fullscreen mode

image.png

2. The next step is to make the triangles.

If you don't know how to make triangles or have a hard time understanding how it works, I've already written an article about it.

You can check it out HERE




Okay back to our triangles.

You can make them with before/after pseudo elements.

A.

.honeycomb::before {
    content: "";
    display: block;
    /* I made it red just to show you where the triangle is */
    border-right: solid red 28px;
    border-top: solid transparent 50px;
    border-bottom: solid transparent 50px;
}
Enter fullscreen mode Exit fullscreen mode

image.png

Now we just need to position it on top of the rectangle :

.honeycomb::before {
    content: "";
    display: block;
    /* I made it red just to show you where the triangle is */
    border-right: solid red 28px;
    border-top: solid transparent 50px;
    border-bottom: solid transparent 50px;
    position: absolute;
    left: -27.8px;
    top: 0px;
}
Enter fullscreen mode Exit fullscreen mode

image.png

B.

And we do the same thing for the other triangle :

.honeycomb::after {
    content: "";
    display: block;
    /* I made it red just to show you where the triangle is */
    border-right: solid red 28px;
    border-top: solid transparent 50px;
    border-bottom: solid transparent 50px;
    /* position it at the bottom */
    position: absolute;
    left: 56.9px;
}
Enter fullscreen mode Exit fullscreen mode

image.png

For flipping the triangle you could either :

  • Use rotate property Or
  • Use scale property
       /* flipping the triangle */
    transform: scaleX(-1);
    /* or rotate it 180deg */
    transform: rotate(180deg);
Enter fullscreen mode Exit fullscreen mode
.honeycomb::after {
    content: "";
    display: block;
    /* I made it red just to show you where the triangle is */
    border-right: solid red 28px;
    border-top: solid transparent 50px;
    border-bottom: solid transparent 50px;
    /* position it at the bottom */
    position: absolute;
    left: 56.9px;
    /* flipping the triangle */
    transform: scaleX(-1);

    /* or rotate it 180deg
    transform: rotate(180deg); */
}
Enter fullscreen mode Exit fullscreen mode

image.png

Just change all the background color to #3d3d3d and you have a honeycomb

image.png


Here's my pen :

See the Pen
Honeycomb
by Nazanin Ashrafi (@nazaneyn)
on CodePen.


If you want to the honeycomb to look like this (below picture), instead of the sharp point facing up , all you have to do is to remove the rotate proprty :

image.png

.honeycomb {
    width: 57px;
    height: 100px;
    background-color: #3d3d3d;
    /* transform: rotate(90deg); */
}
Enter fullscreen mode Exit fullscreen mode

That's the end of this article.

I hope you enjoyed it 😊

image.png
You can also connect with me on twitter

Top comments (0)

We're hiring!

We're Hiring

We're looking for a Senior Full Stack Engineer to join the DEV team.

Head here to learn more.