交通信号灯的CSS形状

Question

我在这里苦苦挣扎，我对CSS很新，不知道这些形状出了什么问题。我想把圆圈放在广场上。我正在做一些研究并试图尽可能多地学习我的控制评估，我知道你可以使用图像，但我只是检查我的所有选项 我做错了什么？

.circle {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: black;
  position: absolute;
  z-index: 2;
}
.circle0 {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: black;
  position: absolute;
  z-index: 3;
  top: 27%;
}
.circle1 {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: black;
  position: absolute;
  z-index: 4;
  top: 54%;
}
.square {
  width: 200px;
  height: 600px;
  background-color: white;
  position: absolute;
  border-style: solid;
  border-color: black;
  z-index: 1;
}

<div class="square"></div>
<div class="circle"></div>
<div class="circle0"></div>
<div class="circle1"></div>

Answer 1

您需要将.square div包围在3个圆圈div：

<div class="square">
  <div class="circle"></div>
  <div class="circle0"></div>
  <div class="circle1"></div>
</div>

Fiddle