我在这里苦苦挣扎,我是 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>
最佳答案
您需要将 .square div 包裹在 3 个圆形 div 周围:
<div class="square">
<div class="circle"></div>
<div class="circle0"></div>
<div class="circle1"></div>
</div>
关于html - 交通灯的 CSS 形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40003359/