Cómo usar: Sección angulada CSS
- La vista previa empieza con un borde inferior angulado. Elige Ambos para una franja inclinada, o Superior.
- Usa Voltear horizontalmente para cambiar la dirección de la inclinación.
- Define la profundidad del corte en px (ángulo fijo) o en vw (se escala con la pantalla).
- Copia el CSS.
Secciones angulares sin skew
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%) inclina el borde inferior de una sección mientras el texto que contiene se mantiene recto, a diferencia de transform: skewY(), que también inclina el contenido. Sube la siguiente sección bajo el ángulo con un margen negativo para que su fondo rellene el hueco.
Otras formas de borde —curvas, flechas, ondas y zigzags— están en el Generador de divisores de sección.
También se busca como: sección inclinada css, sección diagonal css, fondo angulado css, sección sesgada css, divisor diagonal css, hero sección angulada.
Herramientas que combinan con: Sección angulada CSS
- Divisor de sección curvo — Redondea el borde de un hero o una sección con una curva —convexa, cóncava, un ángulo curvo, una suave onda o festones— usando solo CSS.
- Generador de borde zigzag CSS — Recorta un borde en zigzag, de dientes de sierra, festoneado o escalonado en secciones, tarjetas, cupones y diseños de recibos.
- Generador de Olas SVG — Diseña separadores ondulados para landing pages: añade o quita olas (hasta 6, cada una con su propio color, opacidad y forma), ajusta el número de crestas, la altura y la suavidad, elige colores y decide si la ola va arriba o abajo.
- Generador de clip-path CSS — Recorta imágenes y elementos en cualquier forma: elige una de 15 formas iniciales (triángulo, hexágono, estrella, flecha, chevron, bocadillo, círculo, elipse, inset redondeado…) y luego arrastra los puntos sobre una muestra o sobre tu propia imagen.
Preguntas frecuentes
¿Cómo angulo tanto la parte superior como la inferior de una sección?
Elige el borde Ambos: el polígono corta la parte superior e inferior en paralelo, creando una franja inclinada: clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%).
¿Debo usar skewY o clip-path?
clip-path. skewY inclina también el texto y las imágenes de la sección, así que necesitarías un segundo skew inverso en el contenido; clip-path solo corta el borde.
¿Cómo mantengo el mismo ángulo en móvil?
Usa una profundidad de corte en vw: el corte se escala con el ancho de la pantalla, así que el ángulo se mantiene en cualquier tamaño.
¿Puedo instalar Sección angulada CSS como aplicación web y utilizarla sin conexión?
Sí. Sección angulada 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.