How to use CSS to write a hexagon?

As we all know, in general, the shape represented by a div is a rectangle, and if you add the Border-radius property to it, you can make it a rounded rectangle or a circle, but what if you want the div to show more form?

So let's talk about how to use CSS to write a hexagon.

First of all, let's look at a hexagon, which is a rectangle plus about two triangles.

The words of the triangle are very good to write, with the border border property can be implemented.

When we give a div a very thick border, but the width and height are set to 0 respectively, I will get the following graph.

So all we have to do is remove one of the borders, and the other two borders become transparent, so we get a triangle.

So all we have to do is put two triangles and a rectangle together, which makes up a hexagon.

Some people ask, do you want to do a structure that I don't have to use three elements to reach? It's too tedious!

But not really, we just need to combine the right selector, only one element can be achieved.

First, the hexagonal solution is formed in the middle rectangle, on both sides of the triangle, and then we show the middle rectangle with div.

Assuming that the edges of the hexagon are 120px, the value of x is computed using trigonometric functions, and the second is the length of the other side of the rectangle.

Then we use: After and: Before these two selectors make the triangles on both sides. Calculates the y side length, which is the border length of the triangle.

Note the width of the top and bottom border.

Then adjust the position of the triangle with box as a position.

On the other side use: After do the same processing.

Modify the color of the middle rectangle to get a hexagon.

Source: Qian Feng HTML5

How to use CSS to write a hexagon?