Onda encima del pie de página
Gratis, sin registro, funciona en tu navegador.
La misma idea que un divisor de hero, al revés. La curva es el borde superior del pie de página, así que el relleno queda encima y cierra contra el color del propio pie.
La receta
| Forma | Onda de pie de página |
|---|---|
| Exportar como | SVG |
| Tamaño | 551 B |
Paso a paso
- Elige Onda de pie de página: ya viene volteada en vertical para esto.
- Pon el relleno al color de fondo de tu pie de página.
- Copia el SVG y colócalo justo encima del elemento del pie.
- Quita cualquier margen entre la forma y el pie, o se verá una franja del fondo de la página.
Lo que vas a copiar
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="0.35"/><path d="M-360 116.33C-300 112.14,-120 88.78,0 91.21C120 93.64,240 120.61,360 130.91C480 141.…Con más detalle
Usa el volteo vertical y no un `transform: scaleY(-1)` de CSS. El volteo va incrustado en el trazado, así que el SVG exportado se sostiene solo sin contenedor y sin ninguna transformación que recordar — lo que importa sobre todo si más adelante cambias esto a la exportación como fondo CSS, donde de entrada no hay ningún elemento que transformar.
Preguntas
¿De qué forma debería partir para Onda encima del pie de página?
Onda de pie de página, exportada como SVG. Esa combinación es la que vertebra esta página, y la vista previa de arriba es exactamente esa forma — pero es un punto de partida, no una regla. Todos los controles siguen activos en cuanto la abres.
¿Cuánto añade a la página?
Unos 551 bytes para esta combinación. Es menos que un solo icono y no necesita ninguna petición de red, porque la forma es marcado y no un archivo de imagen.
¿Funcionará en móvil?
Sí. Un divisor de onda está configurado para estirarse hasta su contenedor en lugar de mantener su proporción, que es lo que permite que una sola forma cubra cualquier ancho de pantalla sin bandas negras. Los blobs mantienen sus proporciones, porque un blob estirado no es más que una elipse.
Cada cifra y cada forma de esta página se produjeron ejecutando el generador durante la compilación, así que describen la herramienta que estás a punto de usar y no una versión que existió una vez.