2

Seguramente haya una forma sencilla de hacer lo que quiero pero no termino de visualizarla.

Mi idea es crear un generador de banderas utilizando únicamente CSS. A base de selectores no tengo problemas en poner los colores base de las banderas pero me ha surgido una duda con cómo poner los escudos de dichas banderas.

introducir la descripción de la imagen aquí

Por ejemplo, en esta bandera de España quisiera poner el escudo. Para ello he seleccionado los td de las posiciones donde iría y le he puesto el background-image.

introducir la descripción de la imagen aquí

Obviamente esto pone un background a cada td pero me gustaría saber si existe alguna propiedad CSS que permita agrupar dichas celdas y aplicar un único fondo a esa agrupación

Otra opción que se me había ocurrido es poner la imagen de fondo a una única celda y hacer que se salga por tamaño de dicha celda.

Espero haberme explicado bien.

Aquí dejo lo que tengo ahora mismo:

/*SPANISH-FLAG*/
.sp-flag tr:nth-last-child(-n+4) td{
  background-color: #C60B1E;
  color: #C60B1E;
}
.sp-flag tr:nth-child(n+1):nth-child(-n+4) td{
  background-color: #C60B1E;
  color: #C60B1E;
}
.sp-flag tr:nth-child(n+5):nth-child(-n+9) td{
  background-color: #FFC400;
  color: #FFC400;
}

.sp-flag tr:nth-child(n+5):nth-child(-n+9) td:nth-child(n+4):nth-child(-n+9){
  color: transparent;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Escudo_de_Espa%C3%B1a_%28mazonado%29.svg/200px-Escudo_de_Espa%C3%B1a_%28mazonado%29.svg.png");
  background-size: contain;
}
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/flags.css">
</head>
<body>

</body>
</html>
<table border="0" cellpadding="0" cellspacing="0" id="flag" class="flag sp-flag">
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>

Edito

Haciendo pruebas he dado con la solución que comentaba como segunda opción. Lo que he hecho ha sido poner la imagen de fondo a un único td y hacer un transform: scale(4.5) para agrandarla. De todas formas dejo la pregunta como abierta porque me parece una solución un poco "chapucera" y me gustaría algo más elegante si puede ser:

h1 {
  font-family: Impact;
}

.flag tr td{
  background-color: white;
  color:white;
}
.flag tr:first-child td{
  border-top: 2px solid black;
}
.flag tr:last-child td{
  border-bottom: 2px solid black;
}
.flag tr td:first-child{
  border-left: 2px solid black;
}
.flag tr td:last-child{
  border-right: 2px solid black;
}

/*SPANISH-FLAG*/
.sp-flag tr:nth-last-child(-n+4) td{
  background-color: #C60B1E;
  color: #C60B1E;
}
.sp-flag tr:nth-child(n+1):nth-child(-n+4) td{
  background-color: #C60B1E;
  color: #C60B1E;
}
.sp-flag tr:nth-child(n+5):nth-child(-n+9) td{
  background-color: #FFC400;
  color: #FFC400;
}

.sp-flag tr:nth-child(7) td:nth-child(5){
  color: transparent;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Escudo_de_Espa%C3%B1a_%28mazonado%29.svg/200px-Escudo_de_Espa%C3%B1a_%28mazonado%29.svg.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(4.5);
}
<html>
<head>
</head>
<body>
<h1>Fun with flags!</h1>
<table border="0" cellpadding="0" cellspacing="0" id="flag" class="flag sp-flag">
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>

</body>
</html>

8
  • Se puede alterar el HTML?
    – alanfcm
    el 17 oct. 2018 a las 20:12
  • 1
    Preferiría no hacerlo porque quería utilizar ese HTML como "lienzo" único para todas las banderas que genere. La idea es intentar hacerlo sólo con CSS (si es posible).
    – Kiko_L
    el 17 oct. 2018 a las 20:13
  • 1
    Puedes unirlas con colspan y rowspan el 17 oct. 2018 a las 20:19
  • 1
    Para eso necesito cambiar el HTML y me gustaría no hacerlo.
    – Kiko_L
    el 17 oct. 2018 a las 20:23
  • Ajuro tenemos que usar los td? puedo usar otra solucion en css que no sea aplicable a los tds? el 17 oct. 2018 a las 20:48

1 respuesta 1

0

Para el ejemplo de la bandera de España sería agregar colspan y rowspan, a la cuarta columna de la fila 5.

<table border="0" cellpadding="0" cellspacing="0" id="flag" class="flag sp-flag">
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td colspan="6" rowspan="5"></td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>

También necesitas adaptar los selectores CSS para que sólo se aplique el escudo a la celda necesaria.

.sp-flag tr:nth-child(n+5):nth-child(-n+5) td:nth-child(n+4):nth-child(-n+4)
1
  • Gracias por la respuesta pero insisto en que me gustaría conseguirlo sin tocar el HTML. Si no es posible tendré que hacerlo así pero me gustaría saber si tengo alguna opción de hacerlo sólo con CSS.
    – Kiko_L
    el 17 oct. 2018 a las 20:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.