html - 交通灯的 CSS 形状

标签 html css css-shapes

我在这里苦苦挣扎,我是 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>

Fiddle

关于html - 交通灯的 CSS 形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40003359/

相关文章:

html - 如何在伪元素旁边制作一个箭头:hover::before 元素

css - 使用 CSS3 创建 Angular 形状

css - 在 Tic Tac Toe 中绘制获胜线的最佳方法

html - 添加网格列会破坏样式

html - 为什么这个 "width: auto"样式在两个浏览器中都作为内联样式工作,但仅在 IE 中移动到外部样式表时中断?

html - 带弧形尖底的表头

javascript - 在 div 悬停时隐藏所有其他具有相同名称的 div,显示悬停的 div

javascript - 防止对 form.reset() 进行验证

html - 为什么 "z-index"不适用于具有转换 : translateY() 的元素

html - Twitter-Bootstrap 按钮在点击后保持悬停状态