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

This article is about how to use pure CSS to realize the regular polygon transformation of a single div. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Pure use of CSS, so that a "single" div, from a regular triangle to a regular octagon (a single div can only do octagonal at most), and finally with the effect of animation, into a regular polygon transformation animation, but also because regular polygons need to use a lot of trigonometric function calculation, for convenience, the edges of regular polygons are set to 100px.

Regular triangle

Regular triangle does not need to use pseudo elements, only need to set the width of the border of div itself can be generated, first look at the side length of the triangle and the center line, if the side length is 100px, then the center line rounded is 87px (100x sin (60) = 87).

So we need to set the length and width of the div to 0, then set the width of the bottom border to 87px, and the width of the left and right border to 50px (the color is set to transparent transparent) to make a beautiful triangle.

Width:0

Height:0

Border-width:0 50px 87px

Border-style:solid

Border-color:transparent transparent # 095

Square

Square should be the simplest, as long as the length and width is set to the same value on it, but in fact there are two other ways, the first you can set the length and width to 0, the upper and lower border can also be set to 50px, the second is the height is set to 0, the width is set to 100px, and then a side width is also set to 100, are OK.

.a {

Width:100px

Height:100px

Background:#c00

}

.b {

Width:0

Height:0

Border-width:50px

Border-style:solid

Border-color:#095

}

.c {

Width:100px

Height:0

Border-width:0 0 100px

Border-style:solid

Border-color:#069

}

Regular Pentagon

The regular Pentagon needs to enter the basic trigonometric function field. Let's first decompose the regular Pentagon, use the original div as the upper triangle, and then use a pseudo element to make the trapezoid below. Because the angle between each side of the regular Pentagon is 108 degrees, the height and width of the upper triangle can be calculated as 59px (100x cos (54)) and 192px (100x sin (54) x 2) by trigonometric function. The height of the trapezoid below is 95px (100x sin (72)), and the width of the long side is 192px like the triangle above.

After understanding the principle, we can use pseudo-elements to match the production!

.a {

Position:relative

Width:0

Height:0

Border-width:0 81px 59px

Border-style:solid

Border-color:transparent transparent # 069

}

.a: before {

Position:absolute

Content: ""

Top:59px

Left:-81px

Width:100px

Height:0

Background:none

Border-width:95px 31px 0

Border-style:solid

Border-color:#069 transparent transparent

}

Regular hexagon

The angle of each regular hexagon is 120 degrees. If you look at it in the direction of pure CSS, you can change the triangles above the regular hexagon to make a regular hexagon, that is, a combination of the upper and lower trapezoids. The long side of the trapezoid is 200px (100 x cos (60) x 2 + 100), and the height of the trapezoid is 87px (100 x sin (60)).

So as long as the CSS of the regular pentagon is slightly modified, the regular hexagon can be made.

.a {

Position:relative

Width:100px

Height:0

Border-width:0 50px 87px

Border-style:solid

Border-color:transparent transparent # f80

}

.a: before {

Position:absolute

Content: ""

Top:87px

Left:-50px

Width:100px

Height:0

Background:none

Border-width:87px 50px 0

Border-style:solid

Border-color:#f80 transparent transparent

}

Regular heptagonal shape

The pseudo element after must be used again at the beginning of the regular heptagon, because the regular heptagon must be disassembled into three memory blocks, namely, using the original div as the upper triangle, one pseudo element as the middle trapezoid, and then another pseudo element as the trapezoid at the bottom. The angle between the regular heptagon is not an integer, but 128 and 4x7 degrees, and the second decimal place is about 128.57. So the result of the calculation is as shown in the following figure, the point is that it is necessary to know clearly what the length and width is.

After having the length and width, I began to use CSS to write!

.a {

Position:relative

Width:0

Height:0

Border-width:0 90px 43px

Border-style:solid

Border-color:transparent transparent # 09c

}

.a: before {

Position:absolute

Content: ""

Top:140px

Left:-112px

Width:100px

Height:0

Border-width:78px 62px 0

Border-style:solid

Border-color:#09c transparent transparent

}

.a: after {

Position:absolute

Content: ""

Top:43px

Left:-112px

Width:180px

Height:0

Border-width:0 22px 97px

Background:none

Border-style:solid

Border-color:transparent transparent # 09c

}

Regular octagon

The regular octagon actually turns the triangle above the regular heptagon into a trapezoid, and then the trapezoid in the middle becomes a rectangle. the angle between the regular octagon is 135 degrees, and the calculated length and width of each area is as shown below.

With the same understanding of the principle, CSS is much easier to do!

.a {

Position:relative

Width:100px

Height:0

Border-width:0 71px 71px

Border-style:solid

Border-color:transparent transparent # f69

}

.a: before {

Position:absolute

Content: ""

Top:171px

Left:-71px

Width:100px

Height:0

Border-width:71px 71px 0

Border-style:solid

Border-color: # f69 transparent transparent

}

.a: after {

Position:absolute

Content: ""

Top:71px

Left:-71px

Width:242px

Height:0

Border-width:0 0 100px

Background:none

Border-style:solid

Border-color:transparent transparent # f69

}

Thank you for reading! On "how to use pure CSS to achieve a single div regular polygon transformation" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

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.