Como usar: Seção Angulada CSS
- A prévia começa com uma borda inferior angulada. Escolha Ambas para uma faixa inclinada, ou Topo.
- Use Inverter horizontalmente para mudar a direção da inclinação.
- Defina a profundidade do corte em px (ângulo fixo) ou em vw (escala com a tela).
- Copie o CSS.
Seções anguladas sem skew
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%) inclina a borda inferior de uma seção enquanto o texto dentro dela permanece reto — diferente de transform: skewY(), que também inclina o conteúdo. Puxe a próxima seção para cima, sob o ângulo, com uma margem negativa para que o fundo dela preencha o espaço.
Outros formatos de borda — curvas, setas, ondas e zigue-zagues — estão no Gerador de Divisores de Seção.
Também pesquisado como: seção inclinada css, seção diagonal css, fundo angulado css, seção skew css, divisor diagonal css, hero section angulada.
Ferramentas que combinam com: Seção Angulada CSS
- Divisor Curvo de Seção — Arredonde a borda de um hero ou seção com uma curva — convexa, côncava, um ângulo curvo, uma onda suave ou festões — usando apenas CSS.
- 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 Ondas SVG — Crie divisores ondulados de seção para landing pages: adicione ou remova ondas (até 6, cada uma com cor, opacidade e formato próprios), defina o número de cristas, a altura e a suavidade, escolha as cores e se a onda fica no topo ou na base.
- 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 angular o topo e a base de uma seção ao mesmo tempo?
Escolha a opção Ambas: o polígono corta o topo e a base em paralelo, criando uma faixa inclinada — clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%).
Devo usar skewY ou clip-path?
clip-path. O skewY inclina também o texto e as imagens dentro da seção, então você precisaria de um segundo skew invertido no conteúdo; o clip-path corta apenas a borda.
Como manter o mesmo ângulo no celular?
Use uma profundidade de corte em vw: o corte acompanha a largura da tela, então o ângulo permanece igual em qualquer largura.
Posso instalar o Seção Angulada CSS como um aplicativo da web e usá-lo offline?
Sim. O Seção Angulada CSS é 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.