Create the Colombian Flag with HTML and CSS

Here’s a beautiful CSS art project: DibujarteCSS.

The first thing we need to do is create our HTML structure:

<div class="flag">Flag</div>

All we need to place in our HTML code is a div with a class to apply the styles. Now let's style it with CSS:

.flag {
  width: 90%;
  max-width: 500px;
  height: 300px;
  box-shadow: 0 150px 0 #f5cb15 inset, 0 225px 0 #00368f inset, 0 300px 0 #c81125 inset;
}

To create the flag with CSS, we style the class previously assigned to the div in the HTML and give it a width and height. To create the colors of the Colombian flag, we’ll use shadows!! We'll use three shadows, and the trick is to give them a Y offset and use the inset option so the shadow is drawn inside. The result is the following:

If you want to take it to the next level and improve the Colombian flag a bit by adding animations:

@keyframes mover {
  to {
    transform: scale(1.03);
  }
}

.flag {
  width: 100%;
  max-width: 500px;
  height: 300px;
  box-shadow:
    0 150px 0 #f5cb15 inset,
    0 225px 0 #00368f inset,
    0 300px 0 #c81125 inset;
  margin: 1rem auto;
  transition: all 0.2s ease;
  animation: mover 0.5s infinite alternate ease-in-out;
}

Here is a version of the flag on Codepen so you can see the full code and play around with it.