Как расположить элементы по кругу?

Рома Никитин разместил пост 2 недель назад

Пытаюсь сделать блок на страничке, в котором были бы расположены по кругу кружечки в которых бы были бы фото сотрудников, проблема возникает именно в размещении этих самых кружочков, не знаю как разместить их по кругу, заранее спасибо за помощь

Евгений Сальник разместил пост 2 недель назад

Я бы сделал так, в данном примере мы создаем блок, внутри которого с одной стороны располагается круг, и виден только этот круг, дальше с помощью псевдокласса :nth-child() просто задаем свойство transform:rotate() и указываем градусы, очень хорошо выглядит когда по 45 градусов накидывать в каждом следующем блоке, в итоге выйдет круг из 8 таких блоков, у которых видимая часть это только круг, для того что бы остались только кружечки нужно убрать строку border:1px dashed black; вот пример:

<style>
   
html, body {
   
height: 100%;
}
body {
   
display: flex;
   
justify-content: center;
   
align-items: center;
}
.
block {
   
border: 1px dashed black;
   
width: 150px;
   
height: 50px;
   
transform-origin: 100% 25px;
   
transform: rotate(0deg);
   
position: absolute;
}
.
block:nth-child(1) {
   
transform: rotate(45deg);
}
.
block:nth-child(2) {
   
transform: rotate(90deg);
}
.
block:nth-child(3) {
   
transform: rotate(135deg);
}
.
block:nth-child(4) {
   
transform: rotate(180deg);
}
.
block:nth-child(5) {
   
transform: rotate(225deg);
}
.
block:nth-child(6) {
   
transform: rotate(270deg);
}
.
block:nth-child(7) {
   
transform: rotate(315deg);
}

.
square {
   
background: yellow;
   
border: 1px solid black;
   
width: 50px;
   
height: 50px;
   
border-radius: 50%;
}</style>

<div
class="container">
    <div
class="block">
        <div
class="square">

        </div>
    </div>
    <div
class="block">
        <div
class="square">

        </div>
    </div>
    <div
class="block">
        <div
class="square">

        </div>
    </div>
    <div
class="block">
        <div
class="square">

        </div>
    </div>
    <div
class="block">
        <div
class="square">

        </div>
    </div>
    <div
class="block">
        <div
class="square">

        </div>
    </div>
    <div
class="block">
        <div
class="square">

        </div>
    </div>
    <div
class="block">
        <div
class="square">

        </div>
    </div>
</div>



Close