Para crear una representación visual del número ocho utilizando únicamente código CSS, la estrategia más eficaz y limpia consiste en emplear dos elementos div vacíos superpuestos. La clave técnica radica en el uso estratégico de la propiedad border-radius para transformar cuadrados simples en círculos perfectos. Comenzamos definiendo un contenedor principal con posición relativa para actuar como ancla espacial. Dentro de este, insertamos dos hijos posicionados absolutamente. El primer div se configura con dimensiones idénticas en altura y ancho, un borde visible de grosor uniforme y un radio de borde del 50%. Este último es fundamental porque fuerza al navegador a renderizar la forma geométrica como un círculo perfecto sin importar el tamaño que le asignemos. Al hacerlo, establecemos la base estructural superior del ocho.
El segundo paso consiste en duplicar este elemento y ajustar su posición vertical mediante la propiedad top. Si el grosor del borde es de, por ejemplo, veinte píxeles, deberemos desplazar el segundo círculo hacia abajo una distancia aproximada al diámetro menos ese grosor para que ambos anillos se toquen o se solapen ligeramente en el centro, creando así la figura clásica del ocho. Puedes refinar la estética cambiando el color del borde a un tono neón para simular un efecto digital o LED, añadiendo sombras de caja con transparencia para dar profundidad y un aspecto holográfico. Esta técnica es extremadamente ligera, no requiere imágenes externas ni JavaScript, y es completamente responsive si usas unidades relativas como porcentajes o viewport units en lugar de píxeles fijos.
Dominar la creación de formas geométricas con CSS es una habilidad fundamental para cualquier desarrollador frontend. Al entender cómo interactúan las posiciones absoluta y relativa junto con los radios de borde, puedes construir infinidad de iconos y diseños complejos sin depender de assets pesados. Prueba variando los colores, grosores y sombras para adaptar este número ocho a cualquier identidad visual que necesites.