Gerador de Divisores CSS

Divisores de linha simples

/* Regra horizontal sutil */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* Com texto no meio */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

Transição de seção angulada

O truque do clip-path:

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

O canto inferior esquerdo é puxado para cima 48px, criando uma inclinação diagonal. Para transitar de forma limpa, a próxima seção deve começar alinhada com a inclinação, sem espaço branco.

Para uma diagonal indo na outra direção, troque qual canto inferior é levantado. Para um entalhe ou ziguezague, adicione mais vértices.

Divisores de onda SVG

SVG é a maneira mais limpa de fazer curvas orgânicas:

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* fecha qualquer espaço subpixel */
}

preserveAspectRatio="none" permite que o SVG se estique para a largura do contêiner, independentemente das dimensões de origem. margin-top: -1px fecha a fina lacuna que alguns renderizadores deixam.

Biblioteca comum de divisores

Trechos úteis:

Dicas

• Combinação de costura. O fundo do divisor (preenchimento SVG ou cor da seção angulada) deve combinar exatamente com o fundo da próxima seção. Um tom 1px diferente arruína o efeito.
• Evite curvas pesadas em telas estreitas. Uma onda que parece elegante a 1440px pode parecer uma senoide espremida a 360px. Use amplitude menor em dispositivos móveis através de media queries, ou um caminho SVG diferente.
• Não empilhe múltiplos divisores. Uma costura por limite de seção é suficiente.
• Desempenho. Divisores SVG inline são insignificantes; divisores baseados em imagem custam uma requisição de rede. SVG inline vence.