Como usar: Angled Section CSS
- The preview starts with an angled bottom edge. Choose Both for a slanted band, or Top.
- Use Flip horizontally to change the slant direction.
- Set the cut depth in px (fixed angle) or vw (scales with the screen).
- Copy the CSS.
Angled sections without skew
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%) slants the bottom edge of a section while the text inside stays straight — unlike transform: skewY(), which tilts the content too. Pull the next section up under the angle with a negative margin so its background fills the gap.
Other edge shapes — curves, arrows, waves and zigzags — are in the Section Divider Generator.
Também pesquisado como: slanted section css, diagonal section css, css angled background, skewed section css, css diagonal divider, angled hero section.
Ferramentas que combinam com: Angled Section CSS
- Curved Section Divider — Round off the edge of a hero or section with a curve — convex, scooped, a curved angle, a gentle wave or scallops — using only CSS.
- Zigzag Border CSS — Cut a zigzag, sawtooth, scalloped or stepped edge into sections, cards, coupons and receipt designs.
- SVG Wave Generator — Design wavy section dividers for landing pages: add or remove waves (up to 6, each with its own color, opacity and shape), set the number of crests, height and smoothness, choose colors and whether the wave sits at the top or bottom.
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
Perguntas frequentes
How do I angle both the top and bottom of a section?
Choose the Both edge: the polygon cuts the top and bottom in parallel, giving a slanted band — clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%).
Should I use skewY or clip-path?
clip-path. skewY tilts the text and images inside the section too, so you need a second, reversed skew on the content; clip-path only cuts the edge.
How do I keep the angle the same on mobile?
Use a vw cut depth: the cut scales with the screen width, so the angle stays the same at every width.
Posso instalar o Angled Section CSS como um aplicativo da web e usá-lo offline?
Sim. O Angled Section 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.