Update: This challenge has ended. You can find the solution at the end of this post.

Update 2 Level 2 of this challenge.

Up for a challenge? Well, I have one for you! CSS the following flags with 1 div per flag:

2 and 3 stripe flags

Oh, come on, Ana, this is not a challenge, it's easy and it's been done to death...

Hold on for just a moment, there are a few constraints:

  • maybe it goes without saying, but it should be CSS-only, no JS allowed (and no SVG obviously)

  • as mentioned previously, you are only allowed to use 1 div element per flag - no children and no pseudo elements

  • you are not allowed to import any external resources

  • you are not allowed to have text content in your divs

  • you are not allowed to use any background images via url()

  • you are not allowed to use borders and shadows

  • in all your generated CSS (you may use any preprocessor you wish, this applies to the compiled code), you are only allowed to have 1 background rule with 1 linear-gradient() with less than 10 stops

Confused? Here's the starting code. You may switch to plain HTML or any other preprocessor. You may add any other classes to the already existing ones and/ or any other attributes. For accessibility, in order to have less repetition in your CSS... You may use any other layout, my flex wrap kinda sucks anyway.

You don't need to do any flags that are not in the picture above. You don't even need to do all of those, just one per each direction and each number of stops.

Finally, the less code you need to do this, the better! 😼

You can get the specifications for the flags from the links in this Wikipedia list.

Good luck!

Too easy for you? Come back next week when I'll add level 2 to this challenge. 😼


4,348 0 15