Drawing Taiwan&#s Flag with CSS-CSS Tutorial-php.cn

Drawing Taiwan&#s Flag with CSS

Mary-Kate Olsen

Release： 2024-11-24 11:24:11

Original

188 people have browsed it

I was impressed very much by @alvaromontoro's work

Drawing Togo's Flag with CSS

Alvaro Montoro ・ Nov 19

#css #html #webdev

of drawing a Togo flag with a single div and bunch of magic CSS. It's truly mind-blowing for me. Therefore, I want to do the same thing. Here is how I've done it.

HTML

I add one

with some aria attributes. This will be the single

to render the flag.

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

Copy after login

CSS

I used the same method as @alvaromontoro to create a basic background of the Taiwan flag: red background color with a blue rectangle on the top-left.

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

Copy after login

Drawing Taiwan

The Sun

Ok, the easiest part is finished. Now it is time for the real deal. The sun on the flag.
Drawing Taiwan
It looks pretty complicated, with 12 beams and a circle at the center. How is it possible to use the pseudo elements, ::before and ::after to draw them? It feels like only the clip-path: path() is the only way to do that because path() can draw any shape we want. However, clip-path: path() has a fatal disadvantage: it's not responsive! That means the flag can have only one size if I choose that approach.

I started googling many SVG files of Taiwan flag. And I noticed that they only use 2 elements to represent the sun.

a white 12-beam star
the white circle with a blue border

Drawing Taiwan

Drawing Taiwan
When the circle is put down on the center of the star. It looks like there are 12 beams surrounding the circle with a desired gap. So smart!. It seems like designers have already figured out this clever way to draw that sun. By taking this approach, I can use ::before as the circle and ::after as the star.

12-beam star

It is very easy to find SVG files of Taiwan flag. Unfortunately, all the stars are drawn by path(). It's because path() is responsive when it is in a real

It is a really difficult problem. My final solution is really to calculate all the positions of all the points of the 12-beam star? I utilized this fantastic online SVG Path Editorhttps://yqnn.github.io/svg-path-editor/ to visualize all points in the path.

Drawing Taiwan
And I asked my dear brother who is very good at math what are the positions of the rest of the points. He used mathematica to solve 12 linear equations and got all the points! ?

Drawing Taiwan

Then, I backed to the path editor to draw the outline of the star as the path and scaled it so it will be in a 100*100 scope.

Drawing Taiwan

I then convert all positions to percentages since it's already in 100*100 scope. As a result, we can display the star on the flag

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

Copy after login

Drawing Taiwan

The circle

The circle is relatively easier. However, my first attempt was using the border. It failed because the width of the border can only be px. I changed to use radial-gradient. The tricky part is that the percentage in radial-gradient needs to be the diagonal of the element so it also needs some math but it's not that hard.

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

Copy after login

Result

The full CSS is

&::after {
    content: '';
    position: absolute;
    top: 6.25%;
    left: 12.5%;
    width: 25%;
    height: calc(3 / 8 * 100%);
    background: white;
    clip-path: polygon(50% 0%,56.6987% 25%,75% 6.6987%,68.3013% 31.6987%,93.3013% 25%,75% 43.3013%,100% 50%,75% 56.6987%,93.3013% 75%,68.3013% 68.3013%,75% 93.3013%,56.6987% 75%,50% 100%,43.3013% 75%,25% 93.3013%,31.6987% 68.3013%,6.6983% 75%,25% 56.6987%,0% 50%,25% 43.3013%,6.6983% 25%,31.6987% 31.6987%,25% 6.6983%,43.3013% 25%);;
  }

Copy after login

You can also check out my work on codepen below

Hope you like it!

The above is the detailed content of Drawing Taiwan&#s Flag with CSS. For more information, please follow other related articles on the PHP Chinese website!