Como crear la bandera de Colombia con HTML y CSS - Muy fácil

HTML y CSS muchas veces son menos preciados porque no son lenguaje de programación, pero aun así son muy importantes para la web. Con CSS no tan solo se pueden hacer estilos, sino que también se pueden hacer dibujos, ilustraciones, videojuegos, etc. Aquí te dejo un hermoso proyecto de arte con CSS DibujarteCSS https://dibujartecss.musarte.dev

Lo primero que debemos crear es nuestra estructura de HTML:

    <div class='bandera'>Bandera</div>
  

Lo único que debemos poner en nuestro código HTML es un div con una clase para darle los estilos.

En nuestro archivo CSS debemos colocar el siguiente código:

    .bandera {
      width: 90%;
      max-width: 500px;
      height: 300px;
      box-shadow: 0 150px 0 #F5CB15 inset,
                  0 225px 0 #00368F inset,
                  0 300px 0 #C81125 inset;
    }
  

Para crear la bandera con CSS debemos darle estilos a la clase que colocamos anteriormente al div en el HTML y darle un width y un height, para crear los colores de la bandera de Colombia lo haremos usando sombras!!. Usaremos tres sombras y el truco es darle un tamaño en Y a las sombras y darle la opción de inset para que la sombra se haga desde el interior.

El resultado final sería el siguiente:

Si quieres ir al siguiente nivel y mejorar un poco más la bandera de Colombia agregándole animaciones.

    @keyframes mover {
      to {
        transform: scale(1.03);
      }
    }
    .bandera {
      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 .2s ease;
      animation: mover .5s infinite alternate ease-in-out;
    }
  

Aquí te dejo una versión de la bandera hecha en Link en Codepen

Hemos llegado al final espero te haya servido esta pequeña explicación. 🎉 🎉 🎉