How To Make a Hexagon honeycomb With CSS

Tags: css, codenewbie, webdev
Published: 2021-12-17 20:23:32

I used to think making honeycombs is hard, but it really isn't.<br>
In this article i'll show you how to make a honeycomb. <br><br>


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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639742279133/RDtc8gRSQ.png)

<br><br>

### 1. First you need to make a rectangle :

```css
.honeycomb {
    width: 57px;
    height: 100px;
    background-color: #3d3d3d;
    transform: rotate(90deg);
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639742651476/isvz270Im.png)

<br><br>

### 2. The next step is to make the triangles. <br>

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.<br>
You can check it out [**HERE**](https://dev.to/nazanin_ashrafi/make-triangles-with-borders-in-css-59a) <br>

<br><br>
Okay back to our triangles.<br>
You can make them with before/after pseudo elements.

#### A.
```css
.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;
}
```



![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639748611259/xlZd7gLmfy.png)


Now we just need to position it on top of the rectangle :
```css
.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;
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639748693993/rjYdbly0L.png)



#### B.
And we do the same thing for the other triangle :

```css
.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;
}
```


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639748984923/6RGhGVgY0.png)


For flipping the triangle you could either  :
* Use `rotate` property <br>
Or
* Use `scale` property <br>


```css
       /* flipping the triangle */
    transform: scaleX(-1);
    /* or rotate it 180deg */
    transform: rotate(180deg);
```
 
```css
.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); */
}
```


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639749331848/iec3OlyBL.png)


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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639750046033/LjiF7ikxa.png)


--------------------------------------

Here's my pen :

<iframe height="300" style="width: 100%;" scrolling="no" title="Honeycomb" src="https://codepen.io/nazaneyn/embed/VwMbzgV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/nazaneyn/pen/VwMbzgV">
  Honeycomb</a> by Nazanin Ashrafi (<a href="https://codepen.io/nazaneyn">@nazaneyn</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

------------------------
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](https://cdn.hashnode.com/res/hashnode/image/upload/v1639747093256/cjRH64b7t.png)

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

------------------------
That's the end of this article. <br>
I hope you enjoyed it 😊 <br>

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638469026531/RpjLw35p8.png)
You can also connect with me on [twitter](https://twitter.com/nazanin_ashrafi)