Divisor de sección hero
Gratis, sin registro, funciona en tu navegador.
Lo más común por lo que alguien llega aquí: una curva entre un hero de color y lo que venga debajo, para que las dos secciones se encuentren en una forma en vez de en una línea recta.
La receta
| Forma | Onda suave |
|---|---|
| Exportar como | SVG |
| Tamaño | 322 B |
Paso a paso
- Abre el generador y elige Onda suave en la fila de preajustes.
- Pon el color de relleno al color de fondo de la sección *de abajo*, no al del hero.
- Copia el SVG y pégalo como último elemento dentro de tu hero.
- Dale `display:block` y `width:100%` para que cubra todo el ancho sin dejar hueco debajo.
Lo que vas a copiar
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 137.58C-300 144.27,-120 166.02,0 177.73C120 189.44,240 207.5,360 207.83C480 208.15,600 190.33,720 179.69C840 169.05,960 144.62,1080 143.98C1200 143.34,1380 170.55,1440 175.86L1440 320L-360 320Z" fill="#4f46e5"/></svg>Con más detalle
El color es el paso que la gente falla. El divisor es el borde superior de la sección *siguiente* subiendo hacia el hero, así que tiene que ser del color de esa sección: ponlo del color del hero y obtendrás una forma invisible sobre su propio fondo. Si aparece una línea de un píxel bajo la forma, es el SVG apoyado en su línea base de texto: `display:block` la quita.
Preguntas
¿De qué forma debería partir para Divisor de sección hero?
Onda suave, 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 322 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.