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

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

最佳答案

您可以使用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>