SVG / Seções

Divisor de formas em SVG: bordas e camadas de seção

Gere oito formas de divisor de seção em SVG com amplitude, frequência, altura, espelhamentos, preenchimento invertido e até três camadas. Visualize a seção e copie o SVG, o CSS e o HTML.

Divisor de formas em SVG: bordas e camadas de seção: Escolha uma borda em forma de onda, curva, inclinação, triângulo, seta, zigue-zague, nuvem ou montanha; ajuste sua altura, amplitude e repetições; espelhe ou inverta a forma e empilhe até três camadas. O divisor se adapta a qualquer largura de página. Copie o SVG, o CSS de posicionamento ou uma seção HTML pronta. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria: Ferramentas para desenvolvedores
Execuções: No seu navegador
Custo: Grátis · sem cadastro
Disponibilidade: Pronto para usar

Divisor de formas SVGProcessamento local

Roda inteiramente no seu navegador

Pré-visualização da seção

Uma mudança de cenário.

Uma borda com forma entre duas seções.

Código SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>

Posicionamento CSS

.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }

Seção HTML

<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

Use a cor de fundo da próxima seção para criar uma borda contínua. Inverta verticalmente ao mover um divisor inferior para o topo.

Caminhos fechados e coordenadas

O SVG 2 define os comandos de caminho closepath e cúbico: https://www.w3.org/TR/SVG2/paths.html . O viewBox mapeia essas coordenadas para a área de visualização: https://www.w3.org/TR/SVG2/coords.html

De onde vêm as formas

A forma de onda usa as mesmas curvas suaves do SVG Wave Generator e do SVG Blob Generator; os outros perfis são desenhados a partir de fórmulas simples. Nenhuma arte de terceiros é incluída, portanto o resultado é seu para usar.

Como usar

Escolha uma forma e ajuste sua amplitude, frequência e altura.
Defina as camadas, a opacidade e a cor; depois selecione a borda da seção e os espelhamentos desejados.
Copie o SVG, o CSS de posicionamento e o HTML da seção, ou baixe o SVG.

Privacidade e limitações

A geração das formas e os downloads são executados inteiramente no seu navegador.

Ferramentas relacionadas

Perguntas frequentes

Como faço para que a borda se integre a outra seção?

Use como preenchimento do divisor a cor de fundo dessa seção. O CSS reserva espaço para o divisor e o posiciona de forma absoluta na borda escolhida.

Qual é a diferença entre esta ferramenta e a ferramenta de ondas?

Esta ferramenta adiciona outras sete formas, inversão e HTML de seção. O SVG Wave Generator oferece ondas aleatórias e controles adicionais específicos para ondas. O SVG Blob Generator cria formas orgânicas independentes.

O que a opção de inverter faz?

Inverter fecha o caminho em direção ao topo, em vez de fechá-lo em direção à parte inferior. A borda divisória permanece no mesmo lugar. O espelhamento vertical reflete toda a forma.

Ferramenta grátis · no seu navegador execuções · não precisa de conta