Generador de divisores de forma CSS
Dale al borde entre dos secciones de la página forma de onda, curva, inclinación, flecha o montaña. Elige una forma, ajusta su alto, ancho, color y dirección, previsualízala en una sección de muestra y copia HTML y CSS adaptables creados a partir de un pequeño SVG en línea.
Última actualización:
Coloca el HTML dentro de la sección que lleva el divisor y dale a esa sección position: relative.
Cómo usar Generador de divisores de forma CSS
- Elige una forma en la galería.
- Elige arriba o abajo y pon como color del divisor el de la sección vecina. El color de la sección solo cambia la vista previa.
- Ajusta el alto y el ancho, voltea o invierte la forma y, si quieres, fija un alto distinto para móviles.
- Copia el HTML en la sección que lleva el divisor y dale a esa sección
position: relative. - Copia el CSS en tu hoja de estilos, o usa la pestaña Solo fondo CSS si no puedes añadir HTML.
Cómo funciona el código del divisor
El generador produce tres piezas pequeñas que funcionan juntas:
- Un contenedor (
.shape-divider-bottomo-top) con posición absoluta en el borde de la sección, que ocupa el 100% de su ancho y oculta el desbordamiento.line-height: 0elimina el hueco que dejaría un SVG en línea. - Un SVG en línea con un viewBox de 1200 × 120. Cada forma es un único path cerrado: el contorno dibujado va del borde izquierdo al derecho y se cierra por abajo, así que la parte rellena toca el borde de la sección.
- CSS que fija el alto del SVG (y el ancho opcional por encima del 100%), lo voltea con
rotateY(180deg)cuando hace falta y lo colorea mediante.shape-fill { fill: … }.
Como la forma son datos vectoriales estirados con preserveAspectRatio="none", se ve nítida en cualquier pantalla y el mismo código funciona desde teléfonos hasta monitores ultrapanorámicos.
Cómo elegir la forma del divisor
| Forma | Sensación | Alto típico |
|---|---|---|
| Onda, ondas en capas, ondulación | Amable, orgánica, divertida | 60–150px |
| Curva, curva asimétrica | Suave y moderna, ideal bajo imágenes principales | 50–120px |
| Inclinación | Dinámica, deportiva, páginas de aterrizaje de startups | 40–120px |
| Triángulo, flecha | Dirige la mirada a la siguiente sección o a una llamada a la acción | 30–100px |
| Zigzag, pirámides | Atrevida, retro o festiva | 20–60px |
| Montañas, nubes | Viajes, aire libre, temas infantiles y del tiempo | 80–180px |
| Libro | Sitios editoriales, de revistas o educativos | 40–100px |
Consejos
- Añade a la sección un relleno inferior al menos tan grande como el alto del divisor para que el texto nunca quede bajo la forma.
- Fija un alto menor en móviles: una onda de 150px en un teléfono de 360px de ancho se ve mucho más pronunciada que en escritorio.
- Estirar el ancho al 150–200% aplana las ondas y curvas y da un borde más tranquilo y sutil.
- Para que el divisor parezca parte de la sección siguiente, usa exactamente el mismo color hex para el divisor y para el fondo de esa sección.
Preguntas frecuentes
¿Qué es un divisor de forma?
Un borde decorativo entre dos secciones de un sitio web, como una onda o una inclinación, en lugar de una línea horizontal recta. Suele ser un SVG colocado arriba o abajo de una sección y relleno con el color de la sección contigua, para que las dos secciones parezcan fluir una hacia la otra.
¿Por qué el SVG usa preserveAspectRatio="none"?
Permite que la forma se estire a todo el ancho de la sección manteniendo el alto que fijas en CSS. Sin él, el SVG conservaría sus proporciones de 10:1 y dejaría huecos o crecería muchísimo en pantallas anchas.
¿Por qué el ancho es calc(100% + 1.3px)?
Los navegadores a veces redondean anchos de subpíxel y dejan una línea fina de hueco en el borde derecho de un SVG estirado. Añadir aproximadamente un píxel oculta ese hueco. El elemento padre tiene overflow: hidden, así que nada se sale.
¿Cómo pongo el divisor en la parte superior de una sección?
Elige Arriba. El CSS fija entonces el contenedor en top: 0 y lo gira 180 grados para que la forma apunte hacia dentro de la sección. Usa como color del divisor el de la sección de arriba.
¿Puedo usar un divisor sin editar el HTML?
Sí. La pestaña Solo fondo CSS codifica el SVG en un data URI para background-image, colocado arriba o abajo de la sección. Es útil en constructores de páginas que solo permiten CSS personalizado. Ten en cuenta que un fondo queda detrás del contenido, así que deja relleno para él.
¿Los divisores de forma ralentizan mi sitio?
No. Cada divisor ocupa unos cientos de bytes de SVG en línea, no necesita peticiones adicionales y se oculta a los lectores de pantalla con aria-hidden, así que tampoco afecta a la accesibilidad.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.