javascript - 圆形 Div 周围的 Div

Question

我想在一个圆形 div 周围放置 5 个 div，我该如何实现？

到目前为止，这是我的代码:

.main{
	border: 2px dotted #000000;
	border-radius: 50%;
	width: 500px;
	height: 500px;
}
.cirlce1{
	height: 50px;
	width: 50px;
	border: 2px dotted #000000;
	border-radius: 50%;
	top: 50px;
}
.cirlce2{
	height: 50px;
	width: 50px;
	border: 2px dotted #000000;
	border-radius: 50%;
	top: 50px;
}

<div class="main">
	<div class="cirlce1"></div>
	<div class="cirlce2"></div>
</div>

我希望我的输出是这样的

谢谢。

Answer 1

关键是让小圆圈相对于大圆圈绝对定位。

然后您可以使用 calc() 将它们居中。

最后，对每个小圆应用一系列变换，将它们移动到外边缘，然后将每个小圆围绕大圆旋转 360 度的 1/5(72 度)。如果您使用的是 SASS 等预处理器，则可以使用循环完成最后一步。

.main {
    position: relative;
    border: 2px dotted #000000;
    border-radius: 50%;
    width: 500px;
    height: 500px;
}

.circle {
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    height: 50px;
    width: 50px;
    border: 2px dotted #000000;
    border-radius: 50%;
}

.circle:nth-child(1) {
    transform: translateX(250px);
}

.circle:nth-child(2) {
    transform: rotate(72deg) translateX(250px);
}

.circle:nth-child(3) {
    transform: rotate(144deg) translateX(250px);
}

.circle:nth-child(4) {
    transform: rotate(216deg) translateX(250px);
}

.circle:nth-child(5) {
    transform: rotate(288deg) translateX(250px);
}

<div class="main">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>