CSS shapes for traffic lights

Question

I'm struggling here, I'm very new to CSS and don't know what's going wrong with these shapes here. I'm trying to get the circles on top of the square. I'm doing some research and trying to learn as much as possible for my controlled assessment, I know you can use images but I'm just checking all my options What am i doing wrong?

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

Check your spelling of background-color, you wrote it as backgorund-color — Mathijs Rutgers, Oct 12 '16 at 16:11
As the answer here shows, your circle divs need to be inside your square div, not along side. — Lee, Oct 12 '16 at 16:18

score 2 · Answer 1 · answered Oct 12 '16 at 16:15

2

You will need to wrap the .square div around the 3 circle divs:

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

Fiddle

answered Oct 12 '16 at 16:15

Dr RobotNick

126
3
13

CSS shapes for traffic lights

1 Answers1