<div class="watch-strap"></div>
<div class="watch-face">
  <i class="hour-hand"></i>
  <i class="second-hand"></i>
  <i class="pin"></i>
  <span class="hour hour-12">12</span>
  <span class="hour hour-3">3</span>
  <span class="hour hour-6">6</span>
  <span class="hour hour-9">9</span>
</div>

* {
  box-sizing: border-box;
}

$hand-width: 6px;
$hand-offset: $hand-width / 2;
$hand-color: #736A68;
$watch-size: 200px;
$number-offset: 6px;

.watch-face {
  background-color: #EEEFE6;
  border: 12px solid #C4BDB2;
  border-radius: 50%;
  display: block;
  height: $watch-size;
  width: $watch-size;
  position: relative;
    top: $watch-size / 2;
  z-index: 1;
}

.watch-strap {
  background: $hand-color;
  border-radius: 12px;
  display: block;
  width: $watch-size / 2;
  height: $watch-size * 2;
  margin-left: -($watch-size / 4) + 12px;
  position: absolute;
    left: $watch-size / 2;
  z-index: -1;
}

.hour-hand {
  animation: hours 3600s steps(12) infinite normal;
  background: $hand-color;
  border-radius: 10px;
  display: block;
  height: ($watch-size / 4);
  width: $hand-width;
  position: absolute;
    left: calc(50% - #{$hand-offset});
    bottom: 50%;
  transform-origin: $hand-offset 100%;
  z-index: 2;
}

.second-hand {
  animation: seconds 60s steps(60) infinite normal;
  background: $hand-color;
  border-radius: 10px;
  display: block;
  height: ($watch-size / 2) - ($number-offset * 3);
  width: $hand-width;
  position: absolute;
    left: calc(50% - #{$hand-offset});
    bottom: 50%;
  transform-origin: $hand-offset 100%;
  z-index: 3;
}

.pin {
  content:"";
  display: block;
  width: $hand-width * 2;
  height: $hand-width * 2;
  border-radius: 50%;
  background: $hand-color;
  position: absolute;
    left: calc(50% - (#{$hand-width * 2} / 2));
    top: calc(50% - #{$hand-width});
}

@keyframes seconds {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes hours {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hour {
  color: #999;
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  position: absolute;
  text-align: center;
}

.hour-12,
.hour-6 {
  margin: 0 auto;
  width: 30px;
  left: $number-offset;
  right: $number-offset;
}

.hour-3,
.hour-9 {
  height: 30px;
  margin: auto 0;
  top: $number-offset;
  bottom: $number-offset;
}

.hour-12 {
  top: $number-offset;
}
.hour-3 {
  right: $number-offset;
}
.hour-6 {
  bottom: $number-offset;
}
.hour-9 {
  left: $number-offset;
}