Tutorial WordPress: Añadir separadores diagonales entre secciones con CSS transform

Este tutorial explica con todo lujo de detalles cómo añadir separadores diagonales entre secciones en WordPress usando transformaciones CSS. Verás varias técnicas, ejemplos completos (HTML/CSS/PHP) y recomendaciones prácticas para integración en temas, bloques y maquetadores. Todos los ejemplos de código están dentro de bloques especiales tal y como indicaste.

Concepto básico

Un separador diagonal se suele conseguir superponiendo un elemento con fondo (o un pseudo-elemento) entre dos secciones y aplicando una transformación (rotate o skew) para inclinar su arista. La idea general es:

Crear un contenedor superior y otro inferior
Colocar un pseudo-elemento (::before o ::after) o un elemento extra que abarque la anchura y tenga la altura necesaria para crear la inclinación
Aplicar transform: rotate(…) o transform: skewY(…) y ajustar posicionamiento (top, translate, negative margins) y z-index para conseguir la transición visual entre secciones.

Métodos recomendados

Método A — Pseudo-elemento con transform: rotate (fácil y flexible)

Este método utiliza ::after en la sección superior para crear el triángulo/rectángulo inclinado que tapa la sección inferior. Funciona bien cuando la sección superior tiene overflow: visible o cuando el pseudo-elemento no necesita salir del flujo del contenedor padre demasiado.

HTML de ejemplo (para colocar en plantilla o contenido):


  Sección superior
  Contenido de la sección superior...



  Sección inferior
  Contenido de la sección inferior...

CSS asociado:

.section--top {
  position: relative
  background: #1e90ff / color superior /
  color: white
  padding: 6rem 1.5rem 3rem / espacio extra abajo para la inclinación /
  overflow: visible
}

.section--top::after {
  content: 
  position: absolute
  left: 0
  right: 0
  bottom: -50px / desplaza el pseudo-elemento hacia abajo /
  height: 120px  / suficiente altura para cubrir la inclinación /
  background: #fff / color de la sección inferior (o una transición) /
  transform-origin: 50% 0%
  transform: rotate(-3.5deg) / ángulo de la diagonal /
  z-index: 2
  box-shadow: 0 4px 10px rgba(0,0,0,0.05) / opcional: profundidad /
}

/ La sección inferior debe quedar debajo visualmente /
.section--bottom {
  position: relative
  background: #fff
  color: #222
  padding: 3rem 1.5rem
  z-index: 1
  margin-top: -40px / solapa para que no queden espacios /
}

Notas:

Ajusta bottom/height/rotate para cambiar el ángulo y la zona cubierta.
Si el color de la sección inferior no es sólido, puedes usar un degradado o imagen como background del pseudo-elemento.
Usa z-index para controlar cuál sección se superpone.

Método B — Separador con transform: skewY (sin rotar el contenedor)

Skew modifica la inclinación sin rotar completamente el elemento, y mantiene el contenido interior sin rotación si se aplica a un elemento de fondo que no contiene contenido textual. Suele dar resultados más limpios para ciertos ángulos leves.

HTML (estructura simple):


  
    Sección superior
  
  
    Sección inferior

CSS (ejemplo con pseudo-elemento skew):

.group {
  position: relative
}

.group__top {
  background: linear-gradient(180deg,#0077cc,#005fa3)
  color: #fff
  padding: 5rem 1.5rem 4rem
  position: relative
  z-index: 2
}

/ pseudo-elemento que hace la inclinación pero sin rotar el contenido superior /
.group__top::after {
  content: 
  position: absolute
  left: 0
  right: 0
  bottom: -60px
  height: 120px
  background: #fff / color de la sección inferior /
  transform-origin: 50% 0
  transform: skewY(-4deg) / inclinación /
  z-index: 1
}

/ la sección inferior /
.group__bottom {
  background: #fff
  padding: 3rem 1.5rem
  margin-top: -60px / solapamiento /
  position: relative
  z-index: 0
}

Ventajas del skew:

Menos probabilidad de que el contenido del elemento quede rotado (cuando se aplica sólo al pseudo-elemento)
Ángulos suaves y controlables mediante grados negativos/positivos.

Método C — Separador invertible (parte superior o inferior) y con degradado)

Si quieres que el separador funcione tanto en la base de una sección como en la parte superior de la siguiente (por ejemplo para invertir el ángulo), puedes tener dos pseudo-elementos o aplicar la misma técnica en la sección inferior usando rotate(180deg) o invertir translateY.

.section--with-diagonal {
  position: relative
  padding: 5rem 1.5rem
  background: linear-gradient(180deg,#111827,#0b1220)
  color: #fff
}

.section--with-diagonal::after {
  content: 
  position: absolute
  left: 0
  right: 0
  bottom: -60px
  height: 120px
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0))
  transform: rotate(-4deg)
  transform-origin: 50% 0
  z-index: 2
}

/ Si la siguiente sección también necesita la misma inclinación invertida /
.section--inverse::before {
  content: 
  position: absolute
  left: 0
  right: 0
  top: -60px
  height: 120px
  background: #111827
  transform: rotate(-4deg)
  transform-origin: 50% 100%
}

Integración en WordPress

Opciones para incorporar estos estilos en WordPress:

Customizer → CSS adicional: pega sólo las reglas CSS en Apariencia → Personalizar → CSS adicional. Rápido y sin tocar archivos del tema.
style.css de un child theme: ideal para cambios permanentes. Añade las reglas al final de style.css de tu child theme.
Encolando un archivo CSS: si prefieres un archivo independiente, encola un stylesheet desde functions.php (muestra abajo).
Elementor / WPBakery: aplica clases CSS a la sección y pega las reglas en CSS personalizado del widget / sección o en el CSS global del maquetador.
Gutenberg (Group block): pon un Group con una clase CSS (por ejemplo .group–skew) y añade las reglas en el CSS del tema o Customizer.

Ejemplo de cómo encolar un CSS desde functions.php (child theme):

En ese archivo diagonales.css pondrías las reglas CSS mostradas anteriormente.

Accesibilidad y consideraciones visuales

Asegúrate de mantener contraste suficiente entre los textos y los fondos inclinados comprueba WCAG para contraste cuando el pseudo-elemento cubra parte del contenido visible.
Evita que elementos interactivos (enlaces, botones) queden detrás de pseudo-elementos con z-index mayor que impidan clicks usa pointer-events: none en pseudo-elementos si sólo son decorativos.
Ten en cuenta que transformaciones generarán nuevos contextos de composición para animaciones aprovecha transform y opacity (propiedades con aceleración GPU) para mejorar rendimiento.

Responsividad y ajustes por dispositivos

La inclinación visible puede variar según el ancho de pantalla: en pantallas pequeñas el ángulo puede verse exagerado o el pseudo-elemento puede quedar demasiado alto. Usa media queries para adaptar altura/ángulo:

/ ejemplo de ajustes responsivos /
@media (max-width: 900px) {
  .section--top::after {
    bottom: -40px
    height: 90px
    transform: rotate(-2.5deg)
  }
}
@media (max-width: 480px) {
  .section--top::after {
    bottom: -30px
    height: 70px
    transform: rotate(-1.8deg)
  }
}

Animaciones y microinteracciones

Puedes animar la inclinación al hacer scroll o al entrar la sección usando transitions o animaciones CSS, o bien hacerlo con Intersection Observer para un control más avanzado. Consejo: limita la animación a transform y opacity para mejor rendimiento.

/ animación simple al cargar /
.section--top::after {
  transition: transform 600ms cubic-bezier(.2,.9,.3,1), opacity 400ms
  opacity: 0
  transform: rotate(-8deg) translateY(20px)
}

.section--top.is-visible::after {
  opacity: 1
  transform: rotate(-3.5deg) translateY(0)
}

Compatibilidad y problemas comunes

Transform funciona en navegadores modernos. Para soporte antiguo (IE10/IE11) puede que necesites prefijos (-ms) o enfoques alternativos hoy en día su uso es ampliamente seguro.
Si el pseudo-elemento corta contenido porque el contenedor tiene overflow:hidden, sitúalo fuera del flujo o ajusta overflow. Otra opción es aplicar la inclinación a un elemento hijo que no tenga overflow:hidden.
Si la sección inferior tiene fondo con imagen o contenido complejo, puedes usar pseudo-elementos con background: inherit o usar un degradado que simule la continuidad visual.

Ejemplo completo práctico

Ejemplo concreto listo para pegar en una plantilla de WordPress (HTML en bloque o en template) y CSS en tu style.css o CSS adicional.



  
    Hero con separador diagonal
    Texto de cabecera en la sección hero.
  



  
    Contenido siguiente
    Contenido de la sección siguiente...

/ CSS: añadir en style.css o Customizer -> CSS adicional /
.hero {
  position: relative
  background: linear-gradient(180deg,#0d6efd,#0b5ed7)
  color: #fff
  padding: 6rem 1.5rem 4rem
  overflow: visible
}
.hero::after {
  content: 
  position: absolute
  left: -5%
  right: -5%
  bottom: -60px
  height: 160px
  background: #ffffff
  transform-origin: 50% 0
  transform: rotate(-4deg)
  z-index: 2
  pointer-events: none / decorativo /
  box-shadow: 0 10px 30px rgba(0,0,0,0.08)
}

/ ajuste para la sección siguiente /
.content {
  background: #fff
  padding: 3rem 1.5rem
  margin-top: -80px / solapa para continuidad /
  position: relative
  z-index: 1
}

/ layout interno /
.wrap {
  max-width: 1100px
  margin: 0 auto
}

Consejos de diseño

Usa un ángulo de 2–6 grados para separadores sutiles ángulos mayores dan un efecto más dramático.
Prueba que el separador sea coherente en toda la web: mismos ángulos y espaciamiento para mantener consistencia visual.
Combina separadores con sombras suaves o degradados para suavizar la transición entre secciones.

Conclusión

Los separadores diagonales con transform son una técnica ligera, estética y compatible con la mayoría de proyectos WordPress. Se pueden implementar con pseudo-elementos y transform (rotate o skew) y adaptarse a maquetadores como Gutenberg o Elementor. Asegúrate de ajustar z-index, pointer-events y media queries para evitar problemas en móviles y con elementos interactivos.

SushiHost