Softonic

Generador de Divisores CSS

Paso 1 / 2 CSS
Contenido arriba
Contenido abajo
Siguiente

Los divisores de sección son las líneas horizontales que separan los bloques de una página de aterrizaje, como la línea sutil entre dos secciones o la que cierra una tabla de precios. Este generador construye un divisor horizontal simple: elige un estilo de línea (sólida, discontinua, punteada, doble o estriada), selecciona el color, fija el grosor y el margen, previsualízalo entre dos secciones de ejemplo y copia el CSS resultante.

Cómo construir un divisor

  1. 1

    Elige el estilo de línea

    Elige entre sólida, discontinua, punteada, doble o estriada, el estilo de `border-top` que usa el divisor.

  2. 2

    Elige el color

    Haz que la línea combine con el fondo de las secciones o con el color de tu marca.

  3. 3

    Fija grosor y margen

    El grosor va de 1 a 20 píxeles; el margen controla el espacio vertical arriba y abajo de la línea.

  4. 4

    Previsualiza entre secciones

    El divisor se muestra entre dos secciones de ejemplo para que compruebes la alineación y los espacios.

  5. 5

    Copia el CSS

    Copia la regla `.divider` lista y pégala en tu hoja de estilos.

Divisores de línea simples

/* Regla horizontal sutil */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* Con texto en el medio */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

Transición de sección angulada

El truco de clip-path:

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

La esquina inferior izquierda se eleva 48px, creando una pendiente diagonal. Para una transición limpia, la siguiente sección debe comenzar alineada con la pendiente, sin espacio blanco.

Para una diagonal en la otra dirección, intercambia qué esquina inferior se levanta. Para una muesca o zigzag, añade más vértices.

Divisores de onda SVG

SVG es la forma más limpia de hacer curvas orgánicas:

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* cierra cualquier espacio subpíxel */
}

preserveAspectRatio="none" permite que el SVG se estire al ancho del contenedor sin importar las dimensiones de origen. margin-top: -1px cierra el espacio delgado que algunos renderizadores dejan.

Biblioteca de divisores comunes

Fragmentos útiles:

Patrón Estilo
Línea discontinua border-top: 1px dashed currentColor
Línea punteada border-top: 2px dotted currentColor; opacity: .4
Línea degradada background: linear-gradient(to right, transparent, #999, transparent)
Ornamental Línea + ornamento SVG centrado con ::before/::after
Pendiente angulada clip-path: polygon(...) en la sección de arriba
Onda SVG con un camino de Bezier cúbico
Onda invertida SVG con picos que suben hacia la sección
Zigzag SVG con puntos alternos

Consejos

  • Coincidencia de costuras. El fondo del divisor (relleno SVG o color de sección angulada) debe coincidir exactamente con el fondo de la siguiente sección. Un tono desviado de 1px arruina el efecto.
  • Evita curvas pronunciadas en pantallas estrechas. Una onda que se ve elegante a 1440px puede parecer un seno aplastado a 360px. Usa una amplitud más pequeña en móviles a través de consultas de medios, o un camino SVG diferente.
  • No apiles múltiples divisores. Una costura por límite de sección es suficiente.
  • Rendimiento. Los divisores SVG en línea son insignificantes; los divisores basados en imágenes cuestan una solicitud de red. SVG en línea gana.

Preguntas frecuentes

SVG. CSS puede hacer clips angulados rectos de manera limpia, pero las curvas requieren aproximaciones con muchos vértices de polígono o soluciones alternativas. Los caminos SVG manejan curvas suaves de forma nativa y se escalan a cualquier ancho.

Redondeo subpíxel. Añade margin-top: -1px (o -2px en algunos navegadores) a la onda, o usa display: block para evitar el espacio en blanco de elementos en línea. Ambos trucos cierran la costura de manera confiable.

Sí, visualmente. Pero si la sección de arriba es interactiva (un botón en la esquina inferior), el clip-path angulado elimina el contenido visible de esa región mientras mantiene el área de pulsación, lo que puede sorprender a los usuarios. Deja espacio dentro de la sección angulada para que los elementos interactivos se mantengan alejados del borde cortado.

No. Los divisores son presentacionales y no afectan el contenido de la página, que es lo que los motores de búsqueda indexan. La estructura semántica (encabezados, secciones) importa para el SEO; el separador decorativo entre ellos no.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Herramienta disponible en otros idiomas