CSSで全てを描写したくても、無理はしてはいけないよ

この画像の通りにCSSを実装します。

Monologueのこの記事にも書いてあるとおり、ひどいことになります。

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: #ddd;
}
 
#timepiece {
  position: relative;
  width: 95vmin;
  height: 95vmin;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #fff;
  border: 4px solid #888;
}
 
.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  opacity: 0.8;
  transition: transform 0.3s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
}
 
.hand::after {
  content: "";
  display: block;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
 
  position: absolute;
  top: 0;
  left: 0;
}
 
#hour {
  transform: rotate(180deg);
}
 
#hour::after {
  width: 1.2vmin;
  height: 30vmin;
  background-color: #000;
}
 
#minute {
  transform: rotate(180deg);
}
 
#minute::after {
  width: 1.0vmin;
  height: 36vmin;
  background-color: #000;
}
 
#second {
  transform: rotate(180deg);
}
 
#second::after {
  width: 0.8vmin;
  height: 42vmin;
  background-color: #000;
}
 
.center {
  height: 2vmin;
  width: 2vmin;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #888;
}
 
.center::after {
  content: "";
  display: block;
  height: 1vmin;
  width: 1vmin;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ff0;
}
 
.scale,
.scale-bold {
  width: 0.3vmin;
  height: 2vmin;
  background-color: #444;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: 50% 47.5vmin;
}
 
.scale-bold {
  width: 0.6vmin;
  height: 3vmin;
}

ちょっと寒気がするマジックナンバーがありますが…
47.5vminは時計全体幅の95vminの半分ととらえれば。

それよりも重要なのは、left: 50%;, transform: translateX(-50%);, transform-originとかいう自己幅による位置調整の連打。

<div id="timepiece">
    <div id="hour" class="hand"></div>
    <div id="minute" class="hand"></div>
    <div id="second" class="hand"></div>
    <div class="center"></div>
</div>

ここに、以下の javascript で時計の針を自動生成します。

const timepiece = document.getElementById('timepiece');
const hour = document.getElementById('hour');
const minute = document.getElementById('minute');
const second = document.getElementById('second');
 
(() => {
  for (let i = 0; i < 60; i++) {
    const scale = document.createElement('div');
    if (i % 5 === 0) {
      scale.classList.add('scale-bold');
    } else {
      scale.classList.add('scale');
    }
    scale.style.transform = `translateX(-50%) rotate(${i * 360 / 60}deg)`;
    timepiece.appendChild(scale);
  }
})();

((()=>{})();はIIFEです)

1周を60等分。
それぞれの角度に目盛を発射する。