Мне нужно, чтобы одинаковые элементы html выстроились в круг(в центре еще один элемент) При этом также нужно учесть то, чтобы при различных разрешениях экрана они не превращались в эллипс, а всегда оставались кругом. Осложняется эта задача тем, что обязательна аналогичная адаптивность на мобильных устройствах.
<div class="content mh20 sans-serif">
<div class="circle circle__main">
<div class="circle__inv">
<span class="circle__text"> Выберите интересующую тему </span>
</div>
</div>
<div class="circle">
<div class="circle__inv">
<span class="circle__text">Что-то</span>
</div>
</div>
</div>
И 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;
}