CodeForge

Maquetación Web Dinámica / Pseudo-clases y pseudo-elementos: el arsenal secreto

::before y ::after II: arte con CSS — dibujar sin imágenes

Teoría20 min20 XP

Un elemento y sus dos fantasmas son TRES rectángulos estilizables — y con bordes, radios y transforms, un rectángulo puede ser triángulo, círculo, cinta o globo de diálogo. Dibujar con CSS entrena como pocas cosas tu dominio del box model. Hoy aprendes las formas base; el reto del módulo te pedirá un logo completo.

Las primitivas

primitivas.css
/* CÍRCULO: cuadrado + radius 50% (lo sabías) · PÍLDORA: radius enorme */
.circulo { width: 60px; aspect-ratio: 1; border-radius: 50%; }
.pildora { border-radius: 999px; }

/* TRIÁNGULO: el truco de los bordes — caja de 0×0, tres bordes
 transparentes y uno de color: lo que ves es el bisel del borde */
.triangulo {
width: 0; height: 0;
border: 20px solid transparent;
border-bottom-color: #6d28d9;   /* apunta hacia ARRIBA */
border-top: none;               /* afilarlo */
}

¿Por qué funciona el triángulo? Los bordes de una caja se encuentran en DIAGONAL (míralo en cualquier caja con bordes gruesos de dos colores). Si la caja mide 0×0, cada borde ES un triángulo. Eliges cuál pintar y listo.

Composición: los dos clásicos

Disecciona el speech bubble — es LA plantilla mental de todo el arte CSS: el cuerpo es el elemento (rectángulo redondeado), y la colita es un ::after triángulo (truco de bordes) posicionado con absolute contra su padre relative. Cuerpo + fantasmas posicionados = figura compuesta. La cinta es idéntica en espíritu: rectángulo + muesca triangular.

La caja de herramientas completa

Para el reto que viene, tu inventario de técnicas de dibujo:

TécnicaDibuja
border-radius por esquina (50% 50% 0 0)semicírculos, hojas, gotas
Truco de bordestriángulos y muescas en 4 direcciones
transform: rotate(45deg)rombos, estrellas, corazones
box-shadow múltiplecopias de la forma (¡pixel art!)
clip-path: polygon(...)cualquier polígono (el atajo moderno)

¿Por qué una caja de 0×0 con border: 20px solid y solo border-bottom-color visible produce un triángulo?

Mini-reto

Construye el speech bubble desde cero SIN mirar el ejemplo (cuerpo, colita, posicionamiento) y luego muta la colita: a la derecha, hacia arriba, más gorda. Si puedes mover la colita a voluntad, entendiste la composición — y el reto del módulo no te asusta.

Qué sigue

Ya dibujas. La última lección teórica del módulo recorre los pseudo-elementos especializados: ::selection, ::marker, ::placeholder y el drop cap editorial con ::first-letter.