Pure CSS evolved from triangles to hexagons

Today, I’m going to learn about a CSS question often tested in interviews, using CSS to draw polygons. Take triangles, quadrilaterals, pentagons, and hexagons as examples this time. First, you need to understand some necessary knowledge before you start. (Welcome to pay attention to the front-end point, line and surface of the

1. Basic knowledge reserve

This time, we will use pure CSS knowledge to draw some shapes. In order to draw these shapes, we first need to refresh the basic knowledge of CSS-the CSS box model.

It can be seen from the figure above that the standard box model is composed of content, padding, border, and margin. Let's use the code to see the specific situation.

<!--HTML部分，此部分代码若是不变，后面将复用不在赘述-->
<div id="main"></div>

/*css部分*/ 
#main { 
  width: 100px;
  height: 100px;
  border: 200px solid red; 
}

The renderings are as follows:

Two, actual combat

Just talk about the fake style, now it's up to use these basic CSS properties to draw common triangles, quadrilaterals, pentagons...

2.1 Quadrilateral

If you can’t use the background-color property to draw a quadrilateral, we can see from the above figure that if the width and height of the content are all set to 0, and the width and height of the border are set, then we can get a border consisting only of borders. Quadrilaterals, quadrilaterals are divided into squares, parallelograms, rectangles, etc., here let us use border to realize the above three graphics.

2.1.1 Square

First, let's implement the simplest square.

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid black;
  border-right: 200px solid blue;
  border-top: 200px solid pink;
}

Results as shown below:

2.1.2 Rectangle

In 2.1.1, we have realized the realization of a square by using border, so let's realize the rectangle next. According to the mathematical knowledge we have learned, we only need to adjust the length and width of the square to make the length ≠ the width. But let's implement it next.

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 100px solid red;
  border-right: 100px solid red;
  border-top: 200px solid red;
}

Results as shown below:

2.1.3 Parallelogram

PS: The realization of the parallelogram needs to use two triangles, so it is recommended to skip it first. Please go to read 2.2 to check the realization of the triangle, and then turn back to check the method of the parallelogram here.

Here it is assumed that you have read the content of 2.2, and then implement the parallelogram.

<div id="wrapper">
    <div class="public"></div>
    <div class="public move"></div>
</div>

*{
   margin: 0;
}
#wrapper {
      position: relative;
}
.public {
   width: 0px;
   height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
  position: absolute;
}
.move {
  transform: rotate(180deg);
  top: 200px;
  left: 200px;
}

Results as shown below:

2.2 Triangle

So far, the simplest quadrilateral has been completed, so do you feel it now? Let's go down. Since the border can realize quadrilaterals, then triangles should be reasonable. Of course, there are many types of triangles. According to the angle division, they can be divided into acute triangles, right triangles, and obtuse triangles; the following are implemented separately. one time.

2.2.1 Acute triangle

First, let's take a look at the situation where the left, right, top, and bottom of the border are occupied when the width and height of the content are all 0.

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid black;
  border-right: 200px solid blue;
  border-top: 200px solid pink;
}

}

The renderings are as follows:

It can be seen from the figure that left, right, top, and bottom are all occupying a triangle. Then when we need a triangle, we only need to hide the other three triangles. We can use the transparent attribute value. To hide the border, let's implement it.

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
}

The effect is shown in the figure:

2.2.2 Right triangle

At this point we can draw an acute triangle, we can get a right triangle according to the above picture, as long as the two border sides are displayed, try the code

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid red;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
}

The effect is shown in the figure:

2.2.3 Obtuse triangle

The above picture confirms the feasibility of the previous idea. So let's think about how to achieve an obtuse triangle? According to the previous thinking is not enough, then we need to change our thinking.

We can use two right-angled triangles to cover the small right-angled triangle on the larger one. Let's try it! !

<div id="main1"></div>
<div id="main2"></div>

#main1 {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
}
#main2 {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid black;
  border-left: 150px solid transparent;
  position: absolute;
  /*这里8px是浏览器中的margin自带的间距，之前没有处理*/
  top: 8px;
  left: 58px;
}

The effect diagram is as follows:

This time we use absolute positioning to control the small right-angled triangles, then we can display the obtuse triangles by controlling the color of the black triangles.

2.3 Pentagon

Triangles have been learned, so many figures can be pieced together by triangles. Take a pentagon as an example. Here, we will draw a pentagon with multiple triangles.

<div id="wrapper">
    <div class="main1 tool"></div>
    <div class="main2 tool"></div>
    <div class="main3 tool"></div>
    <div class="main4 tool"></div>
    <div class="main5 tool"></div>
</div>

*{
    margin: 0;
}
#wrapper {
    position: relative;
    top: 300px;
    margin-left: 300px;
}
.main2 {
    transform: rotate(72deg);
}
.main3 {
    transform: rotate(144deg);
}
.main4 {
    transform: rotate(216deg);
}
.main5 {
    transform: rotate(288deg);
}
.tool{
    width: 0px;
    height: 0px;
    border-right: 58px solid transparent;
    border-left: 58px solid transparent;
    border-bottom: 160px solid red;
    position: absolute;
    top: 0;
    left: 0;
}

Results as shown below:

The main difficulty in implementing a pentagon is the value of the three sides of the border and the angle of rotation.

2.4 Hexagon

So far, the three forms of triangle, quad, and pentagon have been realized once, and they are all realized through border, so let us think about how to draw a hexagon, which can be conditionally on paper For drawing, we can divide a pentagon into 6 equilateral triangles. Let us realize the hexagon based on the knowledge learned above!

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
  <div class="main4 tool"></div>
  <div class="main5 tool"></div>
  <div class="main6 tool"></div>
</div>

*{
  margin: 0;
}
#wrapper {
  position: relative;
  top: 300px;
  margin-left: 300px;
}
.main2 {
  transform: rotate(60deg);
}
.main3 {
  transform: rotate(120deg);
}
.main4 {
  transform: rotate(180deg);
}
.main5 {
  transform: rotate(240deg);
}
.main6 {
  transform: rotate(300deg);
}
.tool{
  width: 0px;
  height: 0px;
  border-right: calc(60px / 1.732) solid transparent;
  border-left: calc(60px / 1.732) solid transparent;
  border-bottom: 60px solid red;
  transform-origin: top;
  position: absolute;
  top: 0;
  left: 0;
}

The pentagon is realized by the above method. The difficulty here is mainly to draw an equilateral triangle.

The above method has been implemented, let us think about other methods to achieve it, here we will realize the pentagon through three quadrilaterals, let's experiment! !

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
</div>

*{
    margin: 0;
}
#wrapper {
    position: relative;
    top: 300px;
    margin-left: 300px;
}
.main1 {
    width: calc(120px / 1.732);
    height: 120px;
    background-color: black;
}
.main2 {
    width: calc(120px / 1.732);
    height: 120px;
    transform: rotate(120deg);
    background-color: black;
}
.main3 {
    width: calc(120px / 1.732);
    height: 120px;
    transform: rotate(240deg);
    background-color: black;
}
.tool{
    position: absolute;
    top: 0;
    left: 0;
}

Okay, so far we have talked about how triangles, quadrilaterals, pentagons, and hexagons have been implemented, and the higher implementation methods can be deduced by analogy.

1. If you think this article is good, share it, like it, and let more people see it

2. Welcome to pay attention to the front-end point, line and surface of the official account. The pdf version of "Front End Hundred Questions" is waiting for you