Cómo usar: Divisor de sección curvo
- La vista previa empieza con una curva convexa en el borde inferior; elige Cóncava para el efecto contrario.
- Prueba Ángulo curvo, Onda o Festones y ajusta el número de repeticiones.
- Define la profundidad de la curva y el borde (inferior, superior o ambos).
- Copia el CSS.
Curvas con clip-path
La curva es un polygon() con decenas de puntos que siguen el arco, cada uno definido con calc(100% - …) para que su profundidad se mantenga fija en px o vw. Para una base elíptica sencilla también puedes usar border-radius: 0 0 50% 50% / 0 0 80px 80px, pero eso curva también las esquinas del contenedor; la versión con clip-path solo recorta el borde.
Para ondas en capas, consulta el Generador de ondas SVG; para ángulos y zigzags, el Generador de divisores de sección.
También se busca como: sección curva css, css borde inferior curvo, hero sección curva css, css curve divider, borde redondeado sección css, css arco sección.
Herramientas que combinan con: Divisor de sección curvo
- Sección angulada CSS — Crea secciones anguladas, inclinadas o diagonales —el clásico look de las landing pages— con una sola regla clip-path.
- 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 Border Radius — Redondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina por separado, cambia a esquinas elípticas para formas de blob y hoja, y copia el CSS border-radius válido más corto.
- 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 hago una base curva en una sección?
Elige Curva y copia el CSS: un polygon de clip-path traza una curva a lo largo del borde inferior. Como alternativa, border-radius: 0 0 50% 50% / 0 0 80px 80px da una base elíptica sencilla.
¿La curva puede ir hacia dentro?
Sí: Cóncava curva el borde hacia dentro, de modo que la siguiente sección sube y entra en esta.
¿Un polígono curvo es suficientemente suave?
Sí. La curva usa decenas de puntos; en tamaños normales se ve igual que una curva SVG.
¿Puedo instalar Divisor de sección curvo como aplicación web y utilizarla sin conexión?
Sí. Divisor de sección curvo 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.