Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to draw polygons in css", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to draw polygons in css" this article.

I. basic knowledge reserve

From the figure above, we can see that the standard box model is made up of content,padding,border,margin. Let's take a look at the details with the code.

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

The effect picture is as follows:

II. Actual combat

Instead of practicing fake tricks, we now draw common triangles, quadrilaterals and pentagons by using these basic CSS attributes.

2.1 quadrilateral

If you can not use the background-color property directly to draw a quadrilateral, from the above figure we can see that if we let the width and height of content all set to 0, and set the width and height of border, then we can get a quadrilateral composed only of border, quadrilateral is divided into square, parallelogram, rectangle, etc., here let us use border to achieve the above three kinds of graphics.

2.1.1 Square

First of all, 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;}

The effect is shown in the following figure:

2.1.2 rectangle

In 2.1.1 we have achieved by using border to achieve the square, then let's implement the rectangle, according to the mathematical knowledge we have learned, we only need to adjust the length and width of the square to make it long and ≠ wide, and then let's achieve it.

# 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;}

The effect is shown in the following figure:

2.1.3 parallelogram

PS: the parallelogram needs to be implemented using two triangles, so it is recommended to skip it first. Please go to read 2.2 to see the implementation of the triangles, and then turn back to see the parallel quadrilateral lines here.

By default here, you have finished reading 2.2, and then implement the parallelogram.

* {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;}

The effect is shown in the following figure:

2.2 Triangle

So far, the simplest quadrilateral has been completed, so do you already feel it at this time? We continue to go down, since border can achieve quadrilateral, then triangles according to reason should also be fine, of course, there are many kinds of triangles, according to angles, can be divided into acute triangles, right triangles, obtuse triangles; the following respectively to achieve.

2.2.1 Acute triangle

First of all, let's take a look at the situation occupied by four left,right,top,bottom of border when the width and height of 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 effect picture is as follows:

From the figure, we can see that left,right,top,bottom occupies a triangle, so when we need a triangle, we just need to hide the other three triangles. We can use the value of the transparent attribute to hide border, so let's do 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 acute triangles, right triangles we can get according to the above figure, as long as the display of two border edges, the code to try

# 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 realize an obtuse triangle. It doesn't work according to the previous idea, so we need to change our mind.

We can use two right triangles to cover the small right triangles over the big ones. Let's have a try!

# 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; / * where 8px is the spacing of margin in the browser, which has not been processed before * / top: 8px; left: 58px;}

The effect image is as follows:

This time, small right triangles are controlled by absolute positioning, so we can display obtuse triangles by controlling the color of black triangles.

2.3 Pentagon

Triangles have been learned, so many shapes can be pieced together through triangles. Take the Pentagon as an example, here we will draw a pentagonal shape with multiple triangles.

* {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;}

The effect is shown in the following figure:

The main difficulty in realizing the Pentagon lies in the value of the three sides of the border and the angle of rotation.

2.4 hexagonal

So far, the three forms of triangular line, four, and Pentagon have all been realized, and they are all realized through border, so let's think about how to draw a hexagon, conditional can be drawn on paper, we can divide a Pentagon into six equilateral triangles, let's realize the hexagon through the knowledge learned above!

* {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;}

Through the above method to achieve the Pentagon, the main difficulty here is to draw equilateral triangles.

The above method has been realized, let's think of other methods to achieve it, here we will realize the Pentagon through three quadrilaterals, let's try it!

* {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;}

These are all the contents of the article "how to draw polygons in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.