html - CSS3 圆圈之间由较小的点连接

Question

我真的很想用更小的点连接 3 个圆圈。我一直在看这个 Creating CSS3 Circles connected by lines但我需要的是较小的圆圈作为分隔符。任何帮助是极大的赞赏!非常感谢!

Answer 1

您可以使用 Flexbox 并使圆圈之间的空间响应。您还可以使用 nth-child 选择器来选择每个 5th 圆。 Demo

.parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.circle {
  border: 1px solid black;
  background: black;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.big {
  width: 30px;
  height: 30px;
  background: none;
}

<div class="parent">
  <div class="circle big"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle big"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle big"></div>
</div>