Onda acima do rodapé
Grátis, sem cadastro, roda no seu navegador.
A mesma ideia de um divisor de hero, de cabeça para baixo. A curva é a borda superior do rodapé, então o preenchimento fica acima dela e fecha contra a cor do próprio rodapé.
A receita
| Forma | Onda de rodapé |
|---|---|
| Exportar como | SVG |
| Tamanho | 551 B |
Passo a passo
- Escolha Onda de rodapé — ela já vem espelhada na vertical para isso.
- Defina o preenchimento como a cor de fundo do seu rodapé.
- Copie o SVG e coloque logo acima do elemento do rodapé.
- Remova qualquer margem entre a forma e o rodapé, ou uma faixa do fundo da página aparece.
O que você vai copiar
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="0.35"/><path d="M-360 116.33C-300 112.14,-120 88.78,0 91.21C120 93.64,240 120.61,360 130.91C480 141.…Em mais detalhe
Use o espelhamento vertical e não um `transform: scaleY(-1)` de CSS. O espelhamento está embutido no caminho, então o SVG exportado se sustenta sozinho, sem contêiner e sem transformação para lembrar — o que importa sobretudo se depois você trocar isto pela exportação como fundo CSS, onde de saída não existe elemento algum para transformar.
Perguntas
De qual forma devo partir para Onda acima do rodapé?
Onda de rodapé, 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 551 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.