Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

draw

National Day is coming, this article will talk about the five-pointed star drawing, bless the motherland more prosperous.

The container

<div class="five-pointed-star"></div>
Copy the code

To draw a pentagram, we need to prepare a div element, and then it will be transformed.

style

How can a pentacle be made from a triangle or a quadrilateral? We can take three triangles and put them together, rotate them, and we get a pentacle.

parsing

The small Angle of a five-pointed star is 36°. Assuming b is known, we can calculate the value of a by trigonometric function. The mathematical formula tan36°=a/btan36°=a/btan36°=a/b, which can be converted into js formula:

a = b * Math.tan(36/180*Math.PI)
Copy the code

Tan36 ° = 0.7265425280053608, as shown below:

pentagram

.five-pointed-star..five-pointed-star::before..five-pointed-star::after{
    width: 0;
    height: 0;
    border-left: var(--bw) solid transparent;
    border-right: var(--bw) solid transparent;
    border-top: calc(var(--bw) * 0.726542) solid red; 
}

.five-pointed-star{
    --bw: 100px;
    position: relative;
}
.five-pointed-star::before{
    content: ' ';
    position: absolute;
    transform: translate(-50%, -100%) rotate(70deg);
}
.five-pointed-star::after{
    content: ' ';
    position: absolute;
    transform: translate(-50%, -100%) rotate(-70deg);
}
Copy the code

Draw three triangles, then carry out displacement and rotation transformation to get five-pointed stars, as follows:

As you can see from the second picture, the vertex Angle is not36 °If you have a better solution, please leave a message for discussion.

conclusion

The thing to notice here is that the Angle of the pentacle is 36 degrees, so if you’re not that strict, you don’t have to go too far, you just change — the bw value will change the size of the pentacle; If the requirements are strict and you have a solution, please leave a comment.

For other animation effects, head over to the Funny Animation column, which I hope will help you.