html{
  background: linear-gradient(#08f, #fff);
  padding: 40px;
  width: 170px;
  height: 100%;
  margin: 0 auto;
}

.protector{
  background: transparent;
  width: 180px;
  height: 0;
  position: absolute;
  top: 20px;
  left: -35px;
  border-right: solid 30px transparent;
  border-left: solid 30px transparent;
  border-top: solid 90px #111;
  border-radius: 10px;
  z-index: -1;
}

.protector:nth-child(2){
  top: 140px;
}

.protector:nth-child(3){
  top: 260px;
}

.trafficlight{
  background: #222;
  background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
  width: 170px;
  height: 400px;
  border-radius: 10px;
  position: relative;
  border: solid 5px #333;
}

.trafficlight:before{
  background: #222;
  background-image: radial-gradient(#444, #000);
  content: "";
  width: 170px;
  height: 150px;
  margin: 0 auto;
  position: absolute;
  top: -30px;
  margin-left: 0px;
  border-radius: 50%;
  z-index: -1;
}

.trafficlight:after{
  background: #222;
  background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
  content: "";
  width: 75px;
  height: 800px;
  margin-left: 50px;
  position: absolute;
  top: 150px;
  z-index: -1;
}

.red{
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 5px 5px; 
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 35px;
  animation: 13s red infinite;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px red;
}

.yellow{
  background: yellow;
  background-image: radial-gradient(orange, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 145px;
  left: 35px;
  animation: 13s yellow infinite;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px yellow;
}

.green{
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 270px;
  left: 35px;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px lime;
  animation: 13s green infinite;
}

@keyframes red{
  0%{opacity: 1;}
  20%{opacity: 1;}
  40%{opacity: 1;}
  60%{opacity: .1;}
  80%{opacity: .1;}
  100%{opacity: .1;}
}

@keyframes yellow{
  0%{opacity: .1;}
  20%{opacity: .1;}
  40%{opacity: 1;}
  50%{opacity: .1;}
  60%{opacity: .1;}
  80%{opacity: .1;}
  100%{opacity: .1;}
}

@keyframes green{
  0%{opacity: .1;}
  20%{opacity: .1;}
  40%{opacity: .1;}
  60%{opacity: 1;}
  80%{opacity: 1;}
  85%{opacity: .1;}
  90%{opacity: 1;}
  95%{opacity: .1;}
  100%{opacity: 1;}
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground