CSS3圆圈之间用较小的点连接

Question

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

Answer 1

您可以使用Flexbox并在圈子之间留出空间。您还可以使用nth-child选择器选择每个5th圈。 Demo

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;