En este artículo aprenderás paso a paso cómo crear un reloj abstracto estilo smartwatch usando únicamente HTML y CSS. Este desafío proviene de la plataforma CSS Battle, donde se crean figuras abstractas con la menor cantidad de código posible.

📌 Resultado Final

Así es como queda la figura que vamos a construir:

👉 Ver demo en vivo en CodePen

🚧 Código HTML y CSS utilizado

Primero, te comparto el código completo usado para lograr este diseño:

<div class="band"></div>
<div class="watch">
  <li><li><li><li>
</div>

<style>
  *{
    background-color:#D95F5B;
  }
  .band{
    width:60px;
    height: 220px;
    background-color: #282828;
    border-radius: 80px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .watch{
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 20px solid #282828;
    border-radius: 100%;
    background-color:#D95F5B;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  li{
    list-style:none;
    width: 5px;
    height:10px;
    background-color:#282828;
    position: absolute;
  }
  li:first-child{
    top:5px;
    left: 50%;
    transform: translateX(-50%);
  }
  li:nth-child(2){
    right:7px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
  }
  li:nth-child(3){
    bottom:5px;
    left: 50%;
    transform: translateX(-50%);
  }
  li:last-child{
   left:7px;
   top: 50%;
   transform: translateY(-50%) rotate(90deg);
  }
</style>

🛠️ Explicación detallada del código CSS

Veamos paso a paso cómo logramos esta figura:

1️⃣ Fondo general

* {
  background-color: #D95F5B;
}

Este código establece un color de fondo rojo claro para toda la página, proporcionando el contraste necesario para destacar nuestro reloj.

2️⃣ La correa del reloj (.band)

.band {
  width: 60px;
  height: 220px;
  background-color: #282828;
  border-radius: 80px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• Dimensiones: La correa tiene 60px de ancho por 220px de alto.
• Color: Un gris oscuro casi negro (#282828).
• Bordes redondeados: border-radius: 80px hace que la correa tenga extremos redondeados, similar a una correa real.
• Posicionamiento centrado: Usamos position: fixed con transformaciones para centrar perfectamente la correa en la pantalla.

3️⃣ La caja del reloj (.watch)

.watch {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 20px solid #282828;
  border-radius: 100%;
  background-color: #D95F5B;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• Forma circular: border-radius: 100% convierte un cuadrado en un círculo perfecto.
• Borde grueso: Un borde de 20px simula la estructura externa del reloj.
• Caja centrada: Al igual que la correa, centrada usando posicionamiento absoluto y transformaciones.
• Fondo coincidente con la página: El mismo color de fondo, dando la ilusión visual de un reloj con orificio en el centro.

4️⃣ Marcas del reloj (li)

li {
  list-style: none;
  width: 5px;
  height: 10px;
  background-color: #282828;
  position: absolute;
}

Estos elementos representan las marcas cardinales del reloj (12, 3, 6 y 9).

• list-style: none: elimina estilos predeterminados.
• Tamaño y color: pequeños rectángulos en gris oscuro.

Posicionamiento de cada marca:

• Superior (12 horas):

li:first-child {
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

• Derecha (3 horas):

li:nth-child(2) {
  right: 7px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

• Inferior (6 horas):

li:nth-child(3) {
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}

• Izquierda (9 horas):

li:last-child {
  left: 7px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

Cada elemento se posiciona cuidadosamente para mantener simetría. Las rotaciones son necesarias para alinear correctamente las marcas laterales.

🎯 Resumen de conceptos CSS clave utilizados

Este desafío pone en práctica:

• Figuras geométricas con border-radius.
• Posicionamiento preciso con position: fixed y position: absolute.
• Uso creativo de transform: translate() y rotate() para centrar y rotar elementos.
• Pseudo-selección con :first-child, :nth-child() y :last-child para posicionar elementos específicos.

📽️ Video explicativo completo

Te invito a ver el proceso completo y la explicación adicional en este video:

💡 ¿Quieres intentarlo?

Ahora es tu turno. Usa este artículo como guía y experimenta creando tu propia versión. No olvides compartir tu resultado en los comentarios o mencionarme en redes sociales. ¡Sigamos aprendiendo CSS juntos!

👉 Ver en CodePen
👉 CSS Battle