Generador de Divisores SVG
Genera divisores SVG de secciones al instante. Elige triángulo, diagonal, zigzag, curva o flecha — copia el snippet HTML y úsalo entre secciones de página.
① Elige una forma ② Establece altura y color de relleno ③ Copia el HTML SVG
Color de relleno
#C9B89A
Cómo funciona
Cada divisor es un SVG de ancho completo con preserveAspectRatio="none". Las coordenadas del polígono o ruta se definen en un viewBox que coincide con la altura, por lo que la forma llena cualquier ancho de contenedor.
Opciones de volteo
Voltear verticalmente refleja la forma al revés usando transform: scaleY(-1). Voltear horizontalmente la refleja izquierda-derecha usando scaleX(-1). Ambos pueden combinarse para 4 orientaciones por forma.
Uso
Coloca el SVG entre dos secciones. Establece su color de relleno para que coincida con la sección debajo. Para cobertura completa, agrega display:block para eliminar el espacio inferior predeterminado del SVG.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80" preserveAspectRatio="none" width="100%" height="80" style="display:block">
<g fill="#c9b89a">
<polygon points="-500,80 720,0 1940,80" />
</g>
</svg>
¿Qué es un divisor SVG de secciones?
Un divisor SVG de secciones es una forma vectorial escalable colocada entre dos secciones de página para crear una transición visual suave. Las formas comunes incluyen triángulos, cortes diagonales, zigzags, curvas y flechas. Como el divisor está definido en SVG con preserveAspectRatio="none", se estira a cualquier ancho de contenedor. Esta técnica no requiere imágenes.
Preguntas frecuentes
Un divisor SVG de secciones es un gráfico vectorial escalable colocado entre dos secciones de página para crear una transición visual suave. Los divisores usan formas como triángulos, curvas o zigzags para separar secciones con un borde decorativo.
El atributo SVG preserveAspectRatio="none" indica al navegador que estire el contenido SVG para llenar exactamente las dimensiones de su contenedor, ignorando la relación de aspecto original.
Un divisor de curva usa un camino de Bezier cúbico suave anclado en el centro superior del viewBox, creando un solo arco suave. Un divisor de onda usa un camino sinusoidal con múltiples picos y valles.
Establece el color de relleno en esta herramienta para que coincida exactamente con el background-color de la sección debajo del divisor.
Sí. Cada forma tiene 4 orientaciones posibles a través de la combinación de volteo vertical y horizontal, lo que da 5 formas × 4 orientaciones = 20 divisores únicos.
Pega el HTML SVG directamente entre las dos etiquetas section. Asegúrate de que el SVG tenga display:block para eliminar el pequeño espacio que los navegadores agregan debajo de los SVG inline.
Sí. El SVG inline es parte del DOM HTML y no requiere solicitudes HTTP. Los motores de búsqueda lo leen como HTML, y como los divisores generalmente no contienen texto, no tienen impacto SEO negativo.