Como usar: Gerador de Divisor de Seção
- Escolha um formato: ângulo, seta, entalhe, curva, concavidade, ângulo curvo, onda, zigue-zague, festões ou degraus.
- Escolha a borda a ser cortada — base, topo ou ambas (as duas bordas com ângulo geram a faixa inclinada clássica).
- Defina a profundidade do corte. Use px ou vw para que o ângulo continue constante quando a seção crescer; para ondas e zigue-zagues, defina o número de repetições.
- Copie o CSS para a sua seção. A regra opcional puxa a próxima seção para cima, por baixo do corte, para que não sobre nenhuma lacuna.
Como funcionam as seções angulares
A seção mantém sua caixa retangular normal; clip-path: polygon() apenas oculta um triângulo (ou uma curva, ou um zigue-zague) ao longo da borda. Cada ponto da borda cortada usa calc(100% - 80px), então o corte tem sempre 80 px de profundidade — tanto em um hero curto quanto em uma seção longa — e o ângulo não muda conforme o conteúdo cresce.
.section {
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
padding-bottom: calc(80px + 3rem);
}
.section + * { margin-top: -80px; padding-top: calc(80px + 3rem); }A segunda regra puxa a próxima seção para cima, por baixo do corte, para que o fundo dela — e não o da página — preencha a lacuna angulada. O z-index: 1 mantém a seção recortada por cima. Curvas, ondas e festões são desenhados como polígonos com muitos pontos, que todos os navegadores modernos renderizam com suavidade.
clip-path vs. skew vs. SVG
transform: skewY() também inclina uma seção, mas inclina o conteúdo junto, então você precisa desfazer a inclinação de cada elemento filho. Um divisor em SVG exige um elemento extra. O clip-path recorta a própria seção — incluindo fundos, gradientes e fotos — com uma única regra. Para ondas orgânicas em camadas, use o Gerador de Ondas SVG; para suavizar uma borda em vez de cortá-la, use o Gerador de Máscara CSS.
Também pesquisado como: seção inclinada css, seção diagonal css, divisor de seção css, clip-path seção css, separador de seção css, borda zigue-zague css, seção curva css.
Ferramentas que combinam com: Gerador de Divisor de Seção
- Gerador de Clip-path CSS — Recorte imagens e elementos em qualquer formato: escolha uma das 15 formas iniciais — triângulo, hexágono, estrela, seta, chevron, balão de fala, círculo, elipse, retângulo arredondado… — e depois arraste os pontos sobre um exemplo ou sobre a sua própria imagem.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Gerador de Blob SVG — Crie formas blob orgânicas e suaves para fundos de seções de destaque, avatares e ilustrações.
- Gerador de Triângulo CSS — Crie um triângulo só com CSS para a seta de um tooltip, o caret de um dropdown ou um balão de fala: escolha uma das 8 direções, a largura, a altura e a cor, e copie o truque do border clássico ou a versão mais simples com clip-path.