Divisor de seção hero
Grátis, sem cadastro, roda no seu navegador.
A coisa mais comum pela qual alguém chega aqui: uma curva entre um hero colorido e o que vem abaixo, para que as duas seções se encontrem numa forma em vez de numa linha reta.
A receita
| Forma | Onda suave |
|---|---|
| Exportar como | SVG |
| Tamanho | 322 B |
Passo a passo
- Abra o gerador e escolha Onda suave na fileira de predefinições.
- Defina a cor de preenchimento como a cor de fundo da seção *de baixo*, não a do hero.
- Copie o SVG e cole como último elemento dentro do seu hero.
- Dê `display:block` e `width:100%` para que ele cubra toda a largura sem deixar vão embaixo.
O que você vai 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>Em mais detalhe
A cor é o passo que as pessoas erram. O divisor é a borda superior da *próxima* seção subindo até o hero, então ele precisa ter a cor daquela seção — defina a cor do hero e você terá uma forma invisível contra o próprio fundo. Se aparecer uma linha de um pixel sob a forma, é o SVG apoiado na linha de base de texto: `display:block` resolve.
Perguntas
De qual forma devo partir para Divisor de seção hero?
Onda suave, exportada como SVG. Essa combinação é a que estrutura esta página, e a pré-visualização acima é exatamente essa forma — mas é um ponto de partida, não uma regra. Todos os controles continuam ativos assim que você a abre.
Quanto isso adiciona à página?
Cerca de 322 bytes para esta combinação. É menos que um único ícone e não precisa de nenhuma requisição de rede, porque a forma é marcação e não um arquivo de imagem.
Vai funcionar no celular?
Sim. Um divisor de onda é configurado para esticar até o contêiner em vez de manter a proporção, e é isso que permite que uma única forma cubra qualquer largura de tela sem tarjas. Blobs mantêm as proporções, já que um blob esticado é só uma elipse.
Cada número e cada forma desta página foram produzidos rodando o gerador no momento do build, então descrevem a ferramenta que você está prestes a usar e não uma versão dela que já existiu.