Cómo hacer contenedores inclinados CSS en 3 pasos | trucos CSS

Estaba actualizando mi cartera y quería usar la barra oblicua (/) como elemento visual para el diseño básico del sitio. No había intentado crear un contenedor inclinado en CSS antes, pero a primera vista parecía que sería fácil. Sin embargo, cuando comencé a profundizar más en él, en realidad hubo algunos desafíos muy interesantes para obtener un contenedor de inclinación CSS que funcionara y admitiera texto y medios.

Esto es lo que sucedió y dónde terminé:

Empecé mirando ejemplos de contenedores no rectangulares que permiten que el texto fluya naturalmente dentro de ellos. Pensé que era posible con CSS, ya que programas como Adobe Illustrator y Microsoft Word lo han estado haciendo durante años.

Paso 1: crea un contenedor inclinado CSS con transformaciones

encontré Módulo Formas CSS y funciona muy bien para solo contenido textual si ponemos shape-outside propiedad a utilizar. Incluso puede justificar completamente el texto. Pero lo que no hace es permitir que el contenido se desplace dentro envase. Entonces, cuando el usuario se desplaza hacia abajo, parece que todo el contenedor inclinado se está moviendo hacia la izquierda, que no es el efecto que quería. En cambio, tomé un enfoque más simple, agregando transform: skew() al contenedor.

.slant-container {
  transform: skew(14deg);
}

¡Ese fue un buen comienzo! El contenedor definitivamente estaba inclinado y el desplazamiento funcionó como se esperaba mientras CSS puro manejaba el cambio de tamaño de la imagen. Sin embargo, el problema obvio es que el texto y las imágenes también se han torcido, lo que dificulta la lectura del contenido y distorsiona las imágenes.

Paso 2: invertir la fuente

Hice varios intentos para resolver los problemas con las imágenes en cursiva y CSS, pero al final se me ocurrió una solución aún más simple: crear una nueva fuente usando FontForge para invertir el texto.

FontForge es un editor de fuentes de código abierto. Elegí Robot de luz condensada para el contenido principal del sitio, así que descargué .ttf y lo abrió en FontForge. A partir de ahí, seleccioné todos los glifos y apliqué una distorsión de 14deg para compensar la pendiente causada por la transformación CSS del contenedor. Guardé el nuevo archivo de fuente como Roboto-Rev-Italic.ttf y lo llamé desde mi hoja de estilo.

Aquí, ahora la fuente está inclinada en lo contrario dirección con la misma cantidad de inclinación del contenedor, compensando las cosas para que el contenido se vea como la fuente Roboto normal que usé originalmente.

Paso 3: refina imágenes y videos

¡Esto funciona muy bien para el texto! La selección de texto incluso funcionó normalmente. A partir de ahí, todo lo que tenía que hacer era invertir la inclinación de la imagen y el video a nivel de bloque usando un negativo skew() valor que compensa el valor aplicado al contenedor:

img,
video {
  transform: skew(-14deg);
}

Sin embargo, terminé empaquetando imágenes y videos en divs adicionales. De esta manera pude darles un bonito fondo que parece encajar bien con el contenedor. Lo que hice fue aguantar ::after pseudoelemento y colóquelo con un fondo que se extienda más allá de los bordes izquierdo y derecho del contenedor inclinado.

img::after,
video::after {
  content: '';
  display: block;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

última demostración

Aquí está la última demostración de nuevo:

Actualmente estoy usando este efecto. mi sitio web personal y me gusta hasta ahora. Pero, ¿has hecho algo similar con un enfoque diferente? ¡Definitivamente déjame saber en los comentarios para que podamos comparar notas!