Drawing Taiwan's Flag with CSS

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 <div> 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>

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);
}

The Sun

Ok, the easiest part is finished. Now it is time for the real deal. The sun on the flag.

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.

1. a white 12-beam star
2. the white circle with a blue border

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 <svg> so they do not have this problem. It is only not responsive in clip-path. The polygon is responsive but I did not find a way to convert path to polygon.

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.

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! 😂

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.

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

&::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%);;
  }

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.

&::before {
    content: '';
    position: absolute;
    top: 14.375%;
    left: 17.92%;
    width: calc(17 / 120 * 100%);
    height: calc(17 / 80 * 100%);
    background: radial-gradient(circle, white 62.3917%, rgb(19, 53, 129) 62.3917%);
    border-radius: 50%;
    z-index: 2;
  }

Result

The full CSS is

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

  &::before {
    content: '';
    position: absolute;
    top: 14.375%;
    left: 17.92%;
    width: calc(17 / 120 * 100%);
    height: calc(17 / 80 * 100%);
    background: radial-gradient(circle, white 62.3917%, rgb(19, 53, 129) 62.3917%);
    border-radius: 50%;
    z-index: 2;
  }
  &::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%);;
  }
}

You can also check out my work on codepen below

Hope you like it!