Como usar: Divisor Curvo de Seção
- A prévia começa com uma curva convexa na borda inferior; escolha Côncava para o inverso.
- Experimente Ângulo curvo, Onda ou Festões e defina o número de repetições.
- Defina a profundidade da curva e a borda (inferior, superior ou ambas).
- Copie o CSS.
Curvas com clip-path
A curva é um polygon() com dezenas de pontos que seguem o arco, cada um definido com calc(100% - …) para que a profundidade fique fixa em px ou vw. Para uma base elíptica simples você também pode usar border-radius: 0 0 50% 50% / 0 0 80px 80px, mas isso também arredonda os cantos da caixa de conteúdo; a versão com clip-path recorta apenas a borda.
Para ondas em camadas, veja o Gerador de Ondas SVG; para ângulos e zigue-zagues, o Gerador de Divisores de Seção.
Também pesquisado como: seção curva css, divisor de seção curva, css borda inferior curva, hero com seção curva css, css divisor curva, css arredondar borda da seção, css seção em arco.
Ferramentas que combinam com: Divisor Curvo de Seção
- Seção Angulada CSS — Crie seções angulares, inclinadas ou diagonais — aquele visual clássico de landing page — com uma única regra de clip-path.
- Gerador de Borda Zigzag CSS — Recorte uma borda zigzag, dente de serra, festonada ou em degraus em seções, cards, cupons e recibos.
- Gerador de Border Radius — Arredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada canto separadamente, mude para cantos elípticos para criar formas de blob e folha e copie o CSS border-radius válido mais curto.
- 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.
Perguntas frequentes
Como faço uma base curva em uma seção?
Escolha Curva e copie o CSS: um polygon do clip-path desenha uma curva ao longo da borda inferior. Como alternativa, border-radius: 0 0 50% 50% / 0 0 80px 80px cria uma base elíptica simples.
A curva pode ir para dentro?
Sim — a Côncava curva a borda para dentro, então a próxima seção avança para cima desta.
A curva em polygon é suave o suficiente?
Sim. A curva usa dezenas de pontos; em tamanhos normais ela tem a mesma aparência de uma curva em SVG.
Posso instalar o Divisor Curvo de Seção como um aplicativo da web e usá-lo offline?
Sim. O Divisor Curvo de Seção é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.