Gryffindor
    
Hufflepuff
    
Ravenclaw
    
Slytherin

En CSS damos al elemento contenedor un ancho determinado, para centrar el contenedor utilizamos la propiedad margin y agregamos flex-box a la propiedad display.

.contenedor {
  width: 560px;
  margin: 0 auto;
  display: flex;
}

A cada una de las casas se le asigna un alto determinado, y con la propiedad flex-grow con el valor de 1, aseguramos una proporcionalidad igual de cada uno de los elementos dentro del contenedor. 

.casa {
  /*distribución*/
  height: 300px;
  flex-grow: 1;
}

Utilizando los id de cada de una de las casas asignamos un color de fondo que las identifique.

#Gryffindor {
  background-color: #A80102;
}
#Hufflepuff {
  background-color: #786254;
}
#Ravenclaw {
  background-color: #31446F;
}
#Slytherin {
  background-color: #097146;
}

Para una visualización del título de cada una de las casas cambiamos el color, aumentamos el tamaño, centramos el texto dentro de cada elemento y lo ubicamos utilizando un padding-top de 15px.

.casa {
  color: white;
  text-align: center;
  font-size: 18px;
  padding-top: 15px;
}

Ahora agregaremos la tipografía de Harry Potter, en HTML, dentro del agregamos la fuente y la utilizamos en cada una de las casas.

.casa {
  /*text*/
  font-family: Harry Potter, Arial;
}

Ahora necesitamos agregar los escudos de cada una de las casas. Utilizaremos background-image en cada una de las casas.

#Gryffindor {
  background-color: #740001;
  background-image: url("img/Gryffindor.png");
}

Para dimensionar, centrar y no repetir, agregamos las propiedades respectivas dentro de la clase casa.

.casa {
   /*background-image*/
  background-size: 110px 150px;
  background-position: center;
  background-repeat: no-repeat;
}

Para realizar los cortes inferiores a las banderas utilizaremos border-image. Esta propiedad importa una imagen, realiza una segmentación de esta imagen y la distribuye entre los diferentes bordes de un elemento.

Por ejemplo en la siguiente imagen segmentamos con valores de porcentajes.

border-image: url(img/border-triangle.png) 10% 20% 30% 40% round;

Para hacer el recorte inferior a la bandera necesitamos que todo el triángulo quede en la sección inferior central, y que al momento de graficar estire la imagen al ancho del elemento, por ello utilizamos la palabra clave, stretch.

border-image: url(img/border-triangle.png) 0% 0% 100% 0% stretch;

Como solo utilizaremos el borde inferior, utilizamos la propiedad border-bottom a cada una de las casas.

.casa {
  /*border-image*/
  border-bottom: 30px solid transparent;
  border-image: url(img/border-triangle.png) 0% 0% 100% 0% stretch;
}

Ahora agregaremos transiciones para una mejor interacción, añadimos un selector de la clase casa con la pseudo-clase :hover, aquí aumentamos el tamaño del texto y el alto de la bandera, para que así, cuando el mouse sea ubicado sobre una bandera esta aumente el tamaño del título y su altura.  

.casa:hover {
  height: 370px;
  font-size: 30px;
}

Tener en cuenta que al aumentar el tamaño del título, el elemento necesita aumentar su ancho, dejando de conservar la proporción dada por flex-grow.

Para que estos cambios se realicen de una manera animada agregamos la propiedad transition a cada una de las casas con el valor de 0.75 segundos. Esta propiedad hará que cada cambio en las propiedades se realice de una forma progresiva.

.casa {
  /*transición*/
  transition:  0.75s;
}

Si deseas aprender mas de programación, recuerda que en Devcode tenemos el Curso de CSS3 y muchos otros cursos esperando por ti para ayudarte a complementar tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.