Как сделать стрелки для квадратных аналоговых часов?

Question

Я пытаюсь сделать аналоговые часы, но квадратные. Проблема в создании стрелок. Ни в какую не получается создать стрелки.

#card7 {
  width: 500px;
  height: 500px;
  background-color: #C4C4C4;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.line {
  width: 100%;
  height: 35px;
  background-color: #0000AA;
  font-size: 20px;
  display: flex;
}

.turn {
  width: 40px;
  height: 35px;
  background-color: #C4C4C4;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  border: 2px solid Black;
  display: flex;
}

.title {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-align: center;
  color: #fff;
  display: flex;
}

.close {
  width: 40px;
  height: 35px;
  background-color: #C4C4C4;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  border: 2px solid Black;
  display: flex;
  box-shadow: inset 2px 2px 0px 0px #FFFFFF, inset -3px -3px 0px 0px #939393;
}

#clockFace {
  width: 490px;
  height: 460px;
  margin: 7px 5px;
  background-color: #C4C4C4;
  box-shadow: inset 0px 0px 0px 8px rgba(255, 0, 0, 1), 0px 0px 0px 5px rgba(149, 1, 1, 1), inset 0px 0px 0px 15px rgba(149, 1, 1, 1);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#clockFace::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  text-align: center;
  background: #000;
}

#clockFace div {
  position: absolute;
  inset: 20px;
  text-align: center;
  display: inline-block;
  transform: rotate(calc(30deg * var(--i)));
}

#clockFace div p {
  display: inline-block;
  transform: rotate(calc(-30deg * var(--i)));
}

.hour-hand {
  width: 8px;
  height: 20px;
  background: seagreen;
}

.minute-hand {
  width: 8px;
  height: 140px;
  background: seagreen;
}

.second-hand {
  width: 8px;
  height: 160px;
  background: seagreen;
}

.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="card7">
  <div class="line">
    <div class="turn">➖</div>
    <p class="title">Часы</p>
    <div class="close">▲</div>
  </div>
  <!--Часы-->
  <div id="clockFace">
    <div style="--i:1;">
      <p>1</p>
    </div>
    <div style="--i:2;">
      <p>2</p>
    </div>
    <div style="--i:3;">
      <p>3</p>
    </div>
    <div style="--i:4;">
      <p>4</p>
    </div>
    <div style="--i:5;">
      <p>5</p>
    </div>
    <div style="--i:6;">
      <p>6</p>
    </div>
    <div style="--i:7;">
      <p>7</p>
    </div>
    <div style="--i:8;">
      <p>8</p>
    </div>
    <div style="--i:9;">
      <p>9</p>
    </div>
    <div style="--i:10;">
      <p>10</p>
    </div>
    <div style="--i:11;">
      <p>11</p>
    </div>
    <div style="--i:12;">
      <p>12</p>
    </div>
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
</div>

Пока, что такой результат:

Answer 1

Селектор #clockFace div перебивает по специфичности классы стрелок, поэтому их настройки игнорируются.

В качестве решения можно

либо увеличить специфичность классов для стрелок,
либо изменить селектор для отметок часов
вынести стрелки из общего контейнера

Например: добавим класс для дивов ответственных за хранение меток часов, селектор вместо #clockFace div станет обычным селектором класса, и не будет влиять на элементы стрелок.

Кроме того, стрелки сами по себе были позиционированы не совсем корректно. Из-за того что отступ считается снизу, не нужно поднимать их в трансформе.

#card7 {
  width: 500px;
  height: 500px;
  background-color: #C4C4C4;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.line {
  width: 100%;
  height: 35px;
  background-color: #0000AA;
  font-size: 20px;
  display: flex;
}

.turn {
  width: 40px;
  height: 35px;
  background-color: #C4C4C4;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  border: 2px solid Black;
  display: flex;
}

.title {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-align: center;
  color: #fff;
  display: flex;
}

.close {
  width: 40px;
  height: 35px;
  background-color: #C4C4C4;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  border: 2px solid Black;
  display: flex;
  box-shadow: inset 2px 2px 0px 0px #FFFFFF, inset -3px -3px 0px 0px #939393;
}

#clockFace {
  width: 490px;
  height: 460px;
  margin: 7px 5px;
  background-color: #C4C4C4;
  box-shadow: inset 0px 0px 0px 8px rgba(255, 0, 0, 1), 0px 0px 0px 5px rgba(149, 1, 1, 1), inset 0px 0px 0px 15px rgba(149, 1, 1, 1);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#clockFace::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  text-align: center;
  background: #000;
}

.label {
  position: absolute;
  inset: 20px;
  text-align: center;
  display: inline-block;
  transform: rotate(calc(30deg * var(--i)));
}

.label p {
  display: inline-block;
  transform: rotate(calc(-30deg * var(--i)));
}

.hour-hand {
  width: 8px;
  height: 20px;
  background: seagreen;
}

.minute-hand {
  width: 8px;
  height: 140px;
  background: seagreen;
}

.second-hand {
  width: 8px;
  height: 160px;
  background: seagreen;
}

.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="card7">
  <div class="line">
    <div class="turn">➖</div>
    <p class="title">Часы</p>
    <div class="close">▲</div>
  </div>
  <!--Часы-->
  <div id="clockFace">
    <div class="label" style="--i:1;">
      <p>1</p>
    </div>
    <div class="label" style="--i:2;">
      <p>2</p>
    </div>
    <div class="label" style="--i:3;">
      <p>3</p>
    </div>
    <div class="label" style="--i:4;">
      <p>4</p>
    </div>
    <div class="label" style="--i:5;">
      <p>5</p>
    </div>
    <div class="label" style="--i:6;">
      <p>6</p>
    </div>
    <div class="label" style="--i:7;">
      <p>7</p>
    </div>
    <div class="label" style="--i:8;">
      <p>8</p>
    </div>
    <div class="label" style="--i:9;">
      <p>9</p>
    </div>
    <div class="label" style="--i:10;">
      <p>10</p>
    </div>
    <div class="label" style="--i:11;">
      <p>11</p>
    </div>
    <div class="label" style="--i:12;">
      <p>12</p>
    </div>
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать стрелки для квадратных аналоговых часов?

Ответы (1 шт):