Maquetación Web Dinámica / Pseudo-clases y pseudo-elementos: el arsenal secreto
::before y ::after II: arte con CSS — dibujar sin imágenes
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
¿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
<div class="fila">
<span class="cinta">OFERTA</span>
<p class="bubble">¡Hola! Soy un globo de diálogo sin imágenes.</p>
</div>body { font-family: system-ui; padding: 32px; }
.fila { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.cinta { position: relative; background: #b45309; color: white; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; padding: 8px 18px; }
.cinta::after { content: ""; position: absolute; right: -12px; top: 0; border: 16px solid #b45309; border-right-color: transparent; border-right-width: 12px; }
.bubble { position: relative; background: #6d28d9; color: white; padding: 12px 18px; border-radius: 14px; max-width: 240px; margin: 0; font-size: 14px; line-height: 1.5; }
.bubble::after { content: ""; position: absolute; bottom: -10px; left: 28px; border: 10px solid transparent; border-top-color: #6d28d9; border-bottom: none; }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écnica | Dibuja |
|---|---|
border-radius por esquina (50% 50% 0 0) | semicírculos, hojas, gotas |
| Truco de bordes | triángulos y muescas en 4 direcciones |
transform: rotate(45deg) | rombos, estrellas, corazones |
box-shadow múltiple | copias 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.