preface

Today is the centenary of the founding of the party, as a Chinese, I am proud, I am proud, I will use my knowledge, for the country to make a force!!

task

  • 1. Create a div as the red flag, using CSS to control the ratio of 3:2 aspect ratio, with a red background.
  • 2. Create five smaller divs and use CSS to control their size and position.
  • 3. Use CSS to control the size, border and position of each small div at the same time, and rotate it to form a five-pointed star with its parent element.
  • 4. Use CSS to pan, rotate, and scale each star separately until the star is the correct size, position, and orientation.
  • 5. For the size and proportion of the five-pointed star, see baidu Encyclopedia five-starred Red Flag Manufacturing Instructions (ink line method) : link

start

1. The key

  • CSS draws a five-pointed star of specified size
  • How to obtain the size of the element div and the rotation Angle of the associated element from the center point position of the pentagon geometry.
  • The geometric center of the five-pointed star (the center of its outer circle) meets the position requirements of the ink line method.
  • Tan18 ° = 5 () – 1) (5) 10 + 2) /) material of 0.32491969623291
  • 0.5 * tan18 ° = 0.1624598481

2. Draw ideas

Before the relevant code is written, a complete mathematical model is constructed and the relevant size values are calculated. First, set the size of each quarter of the flag to 10×10 (px), so the flag size is 300×200 (px).

The radius of the outer circle of the large five-pointed star R=30px, and the radius of the outer circle of the small five-pointed star R= 10px. According to the relevant mathematical model of the principle of five-pointed star drawn by CSS, the size of the relevant border width in the basic triangle that constitutes the five-pointed star can be calculated:

Large pentacle data:

  • The border width of the triangle in the big star is 20.73px, 28.53px, 28.53px
  • Conversion source point data: 28.53px, 9.27px;
  • The o-coordinate (50px, 50px) of the center of the circle is converted to the distance above and to the left of the star’s relative parent: 40.73px vertically and 21.47px horizontally.

Small pentacle data

  • The border width of the triangle in the smaller star is 6.91px, 9.51px, 9.51px;
  • Conversion source point data: 9.51px, 3.09px;
  • The centers of four small pentagonal stars are converted to the distance to the left of the relative parent element of the pentagonal star (due to the absolute positioning method, that is, the distance between the coordinates of the center O of the circle (the conversion source point) and the upper left corner of the original triangle). :
    • (1) (100px, 20px) → (90.49px, 16.91px)
    • (2) (120px, 40px) → (110.49px, 36.91px)
    • (3) (120px, 70px) → (110.49px, 66.91px)
    • (4) (100px, 90px) → (90.49px, 86.91px)
  • From top to bottom, the small five-pointed star is converted to the data value of the distance above and below the parent element and the deflection Angle (calculated according to the square and trigonometric functions of the ink line method, the former value is the Angle of the line that goes through the center of the small five-pointed star and the center of the large five-pointed star, and the latter is the deflection Angle of the transformation), which are in turn:
    • (1) Arctan 3/5≈30.96°→-48.96° (Calculation process: 30.96+18=48.96, 18° is half of the external Angle of the pentagon)
    • (2) arctan1/7 material 8.13 ° and 26.13 °
    • (3) arctan2/7 material 15.94 ° and 2.06 °
    • (4) arctan4/5 material 38.66 ° and 20.66 °

3. Complete code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> < span style> * {border-width: 0; } .flag { width: 300px; height: 200px; background: red; position: relative; }.pentagrammain {margin-top: 40.73px; Margin - left: 21.47 px; width: 0; height: 0; border-top-color: yellow; border-left-color: transparent; border-right-color: transparent; Border - top - width: 20.73 px; Border - left - width: 28.53 px; Border - right - width: 28.53 px; border-style: solid; position: absolute; } .pentagramMain::before { border-width: 0; content: ''; display: block; width: 0; height: 0; border-top-color: yellow; border-left-color: transparent; border-right-color: transparent; Border - top - width: 20.73 px; Border - left - width: 28.53 px; Border - right - width: 28.53 px; border-style: solid; position: absolute; Top: 20.73 px; Left: 28.53 px; transform: rotate(72deg); The transform - origin: 28.53 px 9.27 px; } .pentagramMain::after { border-width: 0; content: ''; display: block; width: 0; height: 0; border-top-color: yellow; border-left-color: transparent; border-right-color: transparent; Border - top - width: 20.73 px; Border - left - width: 28.53 px; Border - right - width: 28.53 px; border-style: solid; position: absolute; Top: 20.73 px; Left: 28.53 px; transform: rotate(-72deg); The transform - origin: 28.53 px 9.27 px; } /*.pentagram {width: 0; height: 0; position: absolute; Border - top: 6.91 px solid yellow; Border - left: 9.51 px solid transparent; Border - right: 9.51 px solid transparent; The transform - origin: 9.51 px 3.09 px; } .pentagram::before { position: absolute; width: 0; height: 0; content: ''; display: block; Border - top: 6.91 px solid yellow; Border - left: 9.51 px solid transparent; Border - right: 9.51 px solid transparent; Top: 6.91 px; Left: 9.51 px; transform: rotate(72deg); The transform - origin: 9.51 px 3.09 px; } .pentagram::after { border-width: 0; content: ''; display: block; width: 0; height: 0; border-top-color: yellow; border-left-color: transparent; border-right-color: transparent; Border - top: 6.91 px solid yellow; Border - left: 9.51 px solid transparent; Border - right: 9.51 px solid transparent; border-style: solid; position: absolute; Top: 6.91 px; Left: 9.51 px; transform: rotate(-72deg); The transform - origin: 9.51 px 3.09 px; }.one {top: 16.9px; Left: 90.49 px; The transform: the rotate (48.96 deg); }.two {top: 36.9px; Left: 110.49 px; The transform: the rotate (26.13 deg); }.three {top: 66.9px; Left: 110.49 px; The transform: the rotate (2.06 deg); }.four {top: 86.9px; Left: 90.49 px; The transform: the rotate (20.66 deg); } </style> </head> <body> <div class='flag'> <div class='pentagramMain'></div> <div class='pentagram one'></div> <div class='pentagram two'></div> <div class='pentagram three'></div> <div class='pentagram four'></div> </div> </body> </html>Copy the code

reference

  • Draw the five-star red flag through CSS
  • Baidu Encyclopedia — Chinese national flag
  • Principle of DRAWING regular pentacle in CSS (mathematical model)

conclusion

China is awesome!!

My column has been updated:

  • Vue source parsing
  • Leetcode
  • Element source parsing
  • Interview — poison is poison

Study group please click here and arrange it now