Equilateral triangle

Today when learning CSS properties, casually draw an equilateral triangle, the principle, of course, is directly using equilateral triangle picture as the background image with three sides hidden, only show one direction of the border

Post the CSS section of the code

#test { --data-border-width: 100px; // Define triangle side length width: 0; height: 0; border-top: 0px solid transparent; border-left: var(--data-border-width) solid transparent; border-right: var(--data-border-width) solid transparent; Border-bottom: calc(var(--data-border-width) * 1.7320508075689) solid #ff0000; }Copy the code

The square root of 3 is an approximate representation of an equilateral triangle (I don’t know how to use the square root of CSS, please let me know in the comment section if there is a similar method)

2.animation

To consolidate the knowledge, after drawing the triangle, I added a rotation animation, which is roughly a rotation

@keyframes r { from { transform: rotate(0deg); } to { transform: rotate(120deg); }}Copy the code

Animation: r 1s linear infinite; It takes three seconds for the equilateral triangle to rotate once, but 120 is just enough to return the equilateral triangle to its original direction, but there is another problem that I found at this time.

The transform-Origin of the box starts at 50%, 50%, somewhere around here

It’s half the height of the triangle, and when you rotate it, the equilateral triangle becomes an odd row

(Giant Richie’s line is dead, no problem at the time of Posting, no problem at the time of modification, call me pornographic and vulgar, you can imagine)

Using all my junior high school math, I racked my brain, scratched a big chunk of my hair, and after a series of calculations, I finally figured out that for the triangle to rotate properly, the transform-origin should be two-thirds of the height, so we should add the transform-origin: 50% calc(100% / 3 * 2); This CSS property, so the center of the circle is at this position

Ok, we finally have the full animation.

3. Synchronize the screen refresh rate

In real life, when everything rotates fast enough, we can see a circle. Thinking of this, I decided to make the triangle rotate into a circle (which turned out to be wrong), so I set the animation-Duration to very, very small, making it rotate once in 0.000003 seconds

Animation: r 0.00001s Linear infinite;Copy the code

But I found that the triangle didn’t rotate at all as fast as I thought

Because the screen refresh rate of the problem, even if the length of the animation is 0.00001 s, but the screen doesn’t refresh 100000 times a second, so see also are limited by the refresh rate of the screen, the effect of at this moment I thought of, if the animation length is equal to the screen refresh rate, so every time the screen refresh of the frame is just equal to the original triangular head, We can’t tell if the triangle is rotating at all.

The refresh rate of the computer screen given to me by the manufacturer is 60Hz, that is to say, it is refreshed 60 times per second. After two hours of calculation and measurement on the draft paper with my few remaining mathematical knowledge, I modified this SENTENCE of CSS style:

--data-hz: 60; Animation: r calc(1s/var(-- data-Hz)) linear infinite;Copy the code

Good. Triangles probably, probably, should look like they don’t have rotation animations anymore.

The triangle actually seems to rotate slowly to the left. Why? Because — data-Hz is actually less than the actual refresh rate, every time the screen is refreshed, the triangle just moves to the position of almost 120deg. Then I make a slight adjustment to — data-Hz, which makes the triangle seem not to rotate or rotate very slowly, and finally the refresh rate is about 60.03123

4. The last

Post code

#test { --data-border-width: 100px; // Define triangle side length width: 0; height: 0; border-top: 0px solid transparent; border-left: var(--data-border-width) solid transparent; border-right: var(--data-border-width) solid transparent; Border-bottom: calc(var(--data-border-width) * 1.7320508075689) solid #ff0000; transform-origin: 50% calc(100% / 3 * 2); - data - hz: 60.03123; Animation: r calc(1s/var(-- data-Hz)) linear infinite; } @keyframes r { from { transform: rotate(0deg); } to { transform: rotate(120deg); }}Copy the code

In the end, this is just a little experiment I did while I was learning. If you have any suggestions, please leave them in the comments section and ask how to implement the square root of CSS