Checking the

As for the colors, we will use:

• 
  #006a4e for the green


• 
  #ffce00 for the yellow


• 
  #d21034 for the red


• 
  #fff for the white

HTML

We will code this flag using a single HTML element:

<div role="img" aria-label="Flag of Togo" class="flag togo"></div>

For accessibility reasons, we added a couple of attributes:

role="img" to indicate the element represents an image.

aria-label="Flag of Togo" so assistive technologies can announce the image as Togo's flag.

Maybe it would be better to have a second visually-hidden element with the flag's "alternative text" linked with an aria-labelledby, but we'll keep it as a single element for simplicity.

CSS

Let's start by setting the flag properties that will be needed:

.flag.togo {

  aspect-ratio: 5 / 3;

  position: relative;

}

With aspect-ratio we set the flag's proportion (width goes first in this case). And we set a relative position because we will draw the star using an absolute-positioned pseudo-element and we want to keep it within the flag container.

For the background, we need five horizontal strips: green, yellow, green, yellow, and green. This is a repetitive pattern of greens and yellows that can be easily coded using a repeating linear gradient:

.flag.togo {

  aspect-ratio: 5 / 3;

  position: relative;

  background: repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);

}

With this, we have the base for the flag, and we need to draw the star. We could do it with conic gradients, but that would be a small pain in the neck. Instead, we will use a pseudo-element and then crop it into the star shape using clip-path:

.flag.togo::before {

  content: "";

  width: 20%;

  aspect-ratio: 1;

  position: absolute;

  /* half of the size of the red square */

  left: 18%;

  top: 30%;

  /* translated half its size to top and left to center it */

  transform: translate(-50%, -50%);

  background: #fff;

  clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 

                     50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);

}

Note: These are approximate points for the star. We could use trigonometry to make it perfect. But this will work as a good enough approximation.

With that, we are done! The whole CSS code for the flag of Togo would be:

.flag.togo {

  aspect-ratio: 5 / 3;

  position: relative;

  background: 

    linear-gradient(#d21034 0 0) 0 0 / 36% 60% no-repeat,

    repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);



  &::before {

    content: "";

    width: 20%;

    aspect-ratio: 1;

    position: absolute;

    left: 18%;

    top: 30%;

    background: #fff;

    clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 

                       50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);

  }

}

Some Thoughts

If we add a display: inline-block to the flag's styles, we will be able to have it in line with the text. In that case, we will need to set a height or a width so the aspect-ratio property can do its magic and automatically set the other value.

By drawing this flag, we have practiced:

• Positioning: relative and absolute


• Gradients: linear and repeating linear


• Aspect ratios: to set the flag and star's sizes


• Clip-paths: to shape the star


• Pseudo-elements: to create the star itself

I hope you enjoyed this short tutorial. I plan to release a new one shortly with other flags, explaining how the different gradients work –not only the linear ones. Keep an eye out for it!