Адаптивное позиционирование элементов в круг

#javascript #html #css

Мне нужно, чтобы одинаковые элементы html выстроились в круг(в центре еще один элемент)
При этом также нужно учесть то, чтобы при различных разрешениях экрана они не превращались
в эллипс, а всегда оставались кругом. Осложняется эта задача тем, что обязательна аналогичная
адаптивность на мобильных устройствах.

    

        

            

                 Выберите интересующую тему 
            
        
        

            

                Что-то
            
        
    


И css

.circle {
width:  10%;
background: #900C3F;
border-radius:  50%;
text-align: center;
font-size:  18px;
margin: 0 auto;
cursor: pointer;
transition: 1s ease-in;
overflow:   hidden;
position:   absolute;
}
.circle:hover {
background: #0C905D;
}
.circle__main {
width:  20%;
position:   static;
}
.circle__inv {
width:  100%;
height: 100%;
padding-top:    50%;
}
.circle__text {
transform:  translateY(-50%);
display:    inline-block;
}

    

Ответы

Ответ 1

Условимся, что в css адаптивный круг и адаптивный квадрат одно и тоже, т.к. border-radius
это лишь псевдо круг.  

Решение:

1 Для решения нам понадобится два родительских контейнера(для задания адаптивного
квадрата, см. 2) и контейнеры-круги.

2. Адаптивный квадрат создается с помощью padding-(top|bottom): 100%;. Процент в
данном случаи берется от ширины родительского контейнера (такая вот особенность).

.parent {
  width: 100px;
}
.child {
  height: 0;
  padding-bottom: 100%; // размер .child будет 100px на 100px
}


3. Центральный круг можно позиционировать многими способами, я предпочитаю через absolute

.circle_main {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto; //фокус именно в margin: auto;
  width: 30%; //к примеру
  height: 30%; //к примеру
}


4. Для честного позиционирования, придется использовать js, что бы правильно рассчитать
координаты внут. кругов.

Пример решения (с комментариями)


Советую изменить расположение так, что бы круг был слева или справа (удобнее изменять
ширину окна)
Кол-во кругов можно изменять на произвольное кол-во (см. блок html)
Всё сделано в процентах, так что полная адаптивность
Самое главное это выбрать размер внут. круга.
В примере используются препроцессор(stylus) и шаблонизатор(jade), если с ними не
знакомы, то там есть кнопка View Compiled. Тоже самое с js.
Адаптивный текст реализован с помощью едениц изменерия vw, не везде работает, тут
лучше протестировать или найти другой способ изменять размер текста (не стал тут заморачиваться
особо).