Gerador de divisores de seção
Escolha a forma, a borda e a profundidade: o gerador recorta a passagem entre duas seções em diagonal, seta, curva, onda, zigue-zague ou rasgado e encaixa a seção vizinha no recorte.
Veja
Copie o código
.divided {
/* Seta embaixo: fica por cima da seção seguinte. */
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 50% 100%, 0 calc(100% - 48px));
padding-block-end: calc(1rem + 48px);
position: relative;
}
/* A seção seguinte sobe e aparece pelo recorte. */
.divided + * {
margin-block-start: -48px;
padding-block-start: calc(1rem + 48px);
}O problema
A passagem inclinada ou curva entre duas seções costumava vir de um SVG absoluto no rodapé da seção, de pseudo-elementos com skew pintados da cor do fundo ou de uma imagem. Todas quebram quando a cor da seção muda ou quando o fundo é uma foto.
Recortar a própria seção resolve, mas sobra um detalhe que pega muita gente: o recorte deixa um buraco, e a seção vizinha precisa subir e ficar na camada certa para aparecer por ele.
Como funciona
Diagonal, seta, zigue-zague e rasgado são polígonos no clip-path; curva e onda são mask com meios elipses sobre uma faixa reta:
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 50% 100%, 0 calc(100% - 48px)) Os pontos combinam porcentagens, que acompanham o tamanho da seção, com calc() em px, que fixa a profundidade do recorte. Assim a seta tem a mesma altura no celular e no desktop.
Com o divisor embaixo, a seção recortada ganha position: relative, que a pinta por cima da seguinte, e a seguinte sobe com margem negativa até aparecer pelo recorte. Com o divisor em cima, quem sobe é a seção recortada, e a ordem do HTML já a deixa por cima; a anterior, achada com :has(+ .divided), abre espaço embaixo.
A onda junta dois meios elipses: um para fora numa metade da seção, outro para dentro na outra, e os dois passam pela metade da profundidade no meio. O rasgado usa profundidades irregulares fixas, para o desenho não mudar a cada build.
O padding do lado recortado tira o conteúdo da faixa cortada. Inverter vira a diagonal, a onda e o rasgado para o outro lado, leva a seta e a curva para dentro e desloca os dentes do zigue-zague.
Quando usar
- Heros e faixas de destaque que terminam em diagonal ou em seta para baixo.
- Passagens entre seções com foto ou gradiente de fundo, em que um SVG da cor do fundo não serve.
- Rodapés que começam em curva ou em onda, e seções com a borda de papel rasgado.
- Trocar pseudo-elementos com
skewpor um recorte que não depende da cor do fundo.
Leia no blog
Outras ferramentas
Playground de corner-shape
Teste squircle, bevel, scoop, notch e superellipse() nos cantos e leve o CSS com border-radius e corner-shape.
FormasCalculadora de raios aninhados
Calcule o raio de dentro a partir do raio de fora, do padding e da borda, para cantos concêntricos.
FormasGerador de bordas onduladas
Onda, zigue-zague, festonado, côncavo, serrilhado e ameias na borda de qualquer elemento com mask, no tamanho que você quiser.