Gerador de Divisores SVG
Gere divisores SVG de secções instantaneamente. Escolha triângulo, diagonal, zigzag, curva ou seta — copie o snippet HTML e use entre secções de página.
① Escolha uma forma ② Defina altura e cor de preenchimento ③ Copie o HTML SVG
Cor de preenchimento
#C9B89A
Como funciona
Cada divisor é um SVG de largura total com preserveAspectRatio="none". As coordenadas do polígono ou percurso são definidas num viewBox que corresponde à altura, para que a forma preencha qualquer largura de contentor.
Opções de inversão
Inverter verticalmente espelha a forma de cabeça para baixo usando transform: scaleY(-1). Inverter horizontalmente espelha-a da esquerda para a direita usando scaleX(-1). Ambos podem ser combinados para 4 orientações por forma.
Utilização
Coloque o SVG entre duas secções. Defina a cor de preenchimento para corresponder à secção abaixo. Para cobertura completa, adicione display:block para remover o espaço inferior padrão do 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>
O que é um divisor SVG de secções?
Um divisor SVG de secções é uma forma vectorial escalável colocada entre duas secções de página para criar uma transição visual suave. As formas comuns incluem triângulos, cortes diagonais, zigzags, curvas e setas. Como o divisor é definido em SVG com preserveAspectRatio="none", estende-se a qualquer largura de contentor. Esta técnica não requer imagens.
Perguntas frequentes
Um divisor SVG de secções é um gráfico vectorial escalável colocado entre duas secções de página para criar uma transição visual suave. Os divisores usam formas como triângulos, curvas ou zigzags para separar secções com uma borda decorativa.
O atributo SVG preserveAspectRatio="none" diz ao browser para esticar o conteúdo SVG para preencher exactamente as dimensões do seu contentor, ignorando a proporção original.
Um divisor de curva usa um percurso de Bezier cúbico suave ancorado no centro superior do viewBox, criando um único arco suave. Um divisor de onda usa um percurso sinusoidal com múltiplos picos e vales.
Defina a cor de preenchimento nesta ferramenta para corresponder exactamente ao background-color da secção abaixo do divisor.
Sim. Cada forma tem 4 orientações possíveis através da combinação de inversão vertical e horizontal, dando 5 formas × 4 orientações = 20 divisores únicos.
Cole o HTML SVG directamente entre as duas etiquetas section. Certifique-se de que o SVG tem display:block para eliminar o pequeno espaço que os browsers adicionam abaixo dos SVG inline.
Sim. O SVG inline faz parte do DOM HTML e não requer pedidos HTTP. Os motores de busca lêem-no como HTML, e como os divisores normalmente não contêm texto, não têm impacto SEO negativo.