Crear la bandera de Colombia con HTML y CSS

Aquí te dejo un hermoso proyecto de arte con CSS DibujarteCSS.

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. Ahora vamos a darle los estilos con CSS:

.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 es 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 0.2s ease;
  animation: mover 0.5s infinite alternate ease-in-out;
}

Aquí te dejo una versión de la bandera hecha en Codepen para que puedas ver el código completo y jugar con el.