Cómo 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.
También se busca como: slanted section css, diagonal section css, css angled background, skewed section css, css diagonal divider, angled hero section.
Herramientas que combinan con: 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.
Preguntas frecuentes
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.
¿Puedo instalar Angled Section CSS como aplicación web y utilizarla sin conexión?
Sí. Angled Section CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.