Cómo usar: Generador de Divisores de Sección
- Elige una forma: ángulo, flecha, muesca, curva, cuenco, ángulo curvo, onda, zigzag, festones o escalones.
- Elige el borde a recortar: abajo, arriba o ambos (con ángulo en ambos bordes obtendrás la clásica banda inclinada).
- Ajusta la profundidad del corte. Usa px o vw para que el ángulo se mantenga constante al crecer la sección; en ondas y zigzags, define el número de repeticiones.
- Copia el CSS en tu sección. La regla opcional sube la siguiente sección bajo el corte para que no quede ningún hueco.
Cómo funcionan las secciones anguladas
La sección conserva su caja rectangular normal; clip-path: polygon() simplemente oculta un triángulo (o una curva, o un zigzag) a lo largo de su borde. Cada punto del borde recortado usa calc(100% - 80px), así que el corte siempre mide 80 px de profundidad, tanto en un hero corto como en una sección larga, y el ángulo no cambia al crecer el contenido.
.section {
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
padding-bottom: calc(80px + 3rem);
}
.section + * { margin-top: -80px; padding-top: calc(80px + 3rem); }La segunda regla desliza la siguiente sección hacia arriba, por debajo del corte, así que su fondo, y no el de la página, rellena el hueco angulado. z-index: 1 mantiene la sección recortada por encima. Las curvas, ondas y festones se dibujan como polígonos con muchos puntos, que todos los navegadores modernos renderizan con suavidad.
clip-path vs. skew vs. SVG
transform: skewY() también inclina una sección, pero distorsiona también su contenido, así que tendrías que deshacer la inclinación de cada elemento hijo. Un divisor SVG necesita un elemento extra. clip-path recorta la propia sección, incluidos fondos, degradados y fotos, con una sola regla. Para ondas orgánicas y en capas, usa el Generador de Ondas SVG; si quieres difuminar un borde en lugar de cortarlo, usa el Generador de Máscaras CSS.
También se busca como: sección angulada css, sección inclinada css, sección diagonal css, divisor de forma css, sección curva css, borde zigzag css, clip-path divisor de sección, separador de sección css.
Herramientas que combinan con: Generador de Divisores de Sección
- 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.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de Blobs SVG — Crea formas blob orgánicas y suaves para fondos hero, avatares e ilustraciones.
- Generador de triángulos CSS — Crea un triángulo solo con CSS para la flecha de un tooltip, el caret de un desplegable o un globo de diálogo: elige una de las 8 direcciones, el ancho, el alto y el color, y copia el truco del border clásico o una versión más sencilla con clip-path.