Как расположить несколько круглых элементов по одной большой окружности?

Question

[tj57]

Нужно расположить элементы таким образом:



У меня белые окружности почему-то съезжают в сторону :



Мой код:

<div class="main-circle">

      <a href="" class="circles right  deg0"></a>
      <a href="" class="circles right deg45"></a>
      <a href="" class="circles left deg135"></a>
      <a href="" class="circles left deg180"></a>
      <a href="" class="circles left deg225"></a>
      <a href="" class="circles right deg315"></a>

      </div>

.main-circle {
  position: absolute;
  top: 285px;
  left: 40%;
  width: 352px;
  height: 352px;
  border-radius: 176px;
  background: #5a9aa8;
}

.circles {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86px;
  height: 86px;
  border-radius:43px;
  background: #fff;
}

.deg0 { transform: translate(176px); }
.deg45 { transform: rotate(45deg) translate(176px) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(176px) rotate(-135deg); }
.deg180 { transform: translate(-176px); }
.deg225 { transform: rotate(225deg) translate(176px) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(176px) rotate(-315deg); }

Answer 1

[Anton fon Faust]

ну, так съезжают они, потому что вы не правильно отцентрировали ваши окружности.
top и left указывают соответственно на верхний левый угол прямоугольника, в который вписан ваш блок.
Поставьте

top: calc(50% - 43px);
    left: calc(50% - 43px);

и будет вам счастье. Только обратите внимание, что знак минус должен с двух сторон быть отделен пробелами внутри calc().

Comments

[tj57]

а как сделать эти элементы адаптивными ?

[Anton fon Faust]

tj57, читайте про единицы измерения (vw, vh, vmin, vmax, %) и media-запросы в css

[tj57]

Anton fon Faust, Я знаю про медиа-запросы в css и про адаптивную верстку, но в этой ситуации у меня возникли проблемы и не получается разобраться

[Anton fon Faust]

tj57, Экстрасенсы уехали на летний отпуск, еще не вернувшись с зимних каникул)))
В общем случае: читаете, придумываете себе, как на каких разрешениях ваши блоки должны выстраиваться/ресайзиться и пишете соответствующие css.

[tj57]

Anton fon Faust, уже разобрался