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

Reto: dibuja un logo solo con CSS

Reto50 min60 XP

El examen de dibujo: un corazón — la figura clásica del arte CSS — usando UN div y sus dos fantasmas. Suena imposible hasta que lo descompones en primitivas; entonces es papiroflexia pura. Este reto entrena la habilidad madre del módulo: VER figuras como composiciones de cajas.

Reto

El corazón de CodeForge: un logo con un div

Media45 min60 XP(×2 sin mirar la solución)

Qué debes construir

Este corazón, con EXACTAMENTE un div en el HTML:

<div class="corazon" role="img" aria-label="Corazón violeta"></div>

body { display: grid; place-items: center; min-height: 220px; background: #f8fafc; }
.corazon { position: relative; width: 80px; height: 72px; }
.corazon::before, .corazon::after {
content: "";
position: absolute;
top: 0;
width: 40px;
height: 64px;
background: #6d28d9;
border-radius: 40px 40px 0 0;
}
.corazon::before { left: 40px; transform: rotate(45deg); transform-origin: 0 100%; }
.corazon::after { left: 0; transform: rotate(-45deg); transform-origin: 100% 100%; }

Requisitos:

HTML: un solo div (con role="img" y aria-label — un dibujo decorativo también se presenta a los lectores de pantalla).
Las dos mitades son ::before y ::after: rectángulos con las DOS esquinas superiores redondeadas (el "dedo" de la forma).
Cada mitad rota ±45° sobre el punto de encuentro (transform-origin — la lección de pivote llega formalmente en el módulo 10; aquí la descubres en la práctica).
Bonus 1: :hover con transform: scale(1.1) en el div (y su transición suave, con prefers-reduced-motion).
Bonus 2: cuando lo tengas, versión alternativa con clip-path o box-shadow múltiple — compara los enfoques.

Reglas

Cero imágenes, cero SVG, cero caracteres (nada de content: "❤").
Solo el div y sus dos pseudo-elementos.
Colores de la casa: violeta #6d28d9 sobre fondo claro.

45:00

Cuando estés listo, arranca el reloj.

El razonamiento: la figura se rinde ante la descomposición correcta. Un corazón = dos rectángulos de punta redonda, rotados ±45°, pivotando sobre su punto de encuentro inferior. De ahí, tres decisiones técnicas:

El div anfitrión no pinta nada: es el lienzo relative con las medidas totales (80×72) — sus fantasmas se posicionan contra él.
Una sola regla para ambos fantasmas (.corazon::before, .corazon::after): forma, tamaño y color compartidos. Las diferencias (left, dirección de giro, origin) van en reglas individuales — DRY aplicado al dibujo.
transform-origin es el alma del truco: rotar sobre la esquina de contacto hace que las puntas inferiores coincidan en el vértice del corazón. Sin origin, girarían sobre sus centros y quedaría un moño roto.

corazon.css

Sobre el bonus 2, el veredicto honesto de cada enfoque: clip-path con un polygon del corazón es UNA declaración pero el resultado es anguloso (los polígonos no curvan); box-shadow múltiple sirve para pixel art, no para curvas; y el SVG del módulo 12 es la herramienta real para logos de producción. Este reto no era el corazón — era transform-origin, la descomposición en primitivas y el box model a nivel instinto. Eso te lo llevas a TODO lo que sigue.

Qué sigue

Dibujaste con dos fantasmas. El gran final del módulo une TODO el arsenal — :checked, :has(), ::before, contadores — en la prueba definitiva de CSS moderno: un checklist interactivo completo, con progreso y celebración, sin una sola línea de JavaScript.