jamesshaw jamesshaw - 7 days ago 5
CSS Question

Coding a Traffic light post

I am in need of some help to code a traffic light post for my schoolwork. I have the actual lights all working but I'm not allowed to post the code online. We are working with JavaScript, html and CSS and I am looking for some code which produces a grey, rounded post to put underneath. If this isn't possible then a rectangular post would also be okay. Also looking for tips on how to design a green arrow like the ones in the image. Thanks :)
Green traffic light arrow

Answer

These elements should get you started.

.pole{
  position: relative;}

.rounded-post {
  width: 50px;
  height: 200px;
  border-radius: 10px;
  background: #000;
}
.red-light {
  position: absolute;
  top: 30px;
  left: 10px;
  background: red;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  -webkit-animation: animate-red 3s linear 2s infinite alternate;
  -moz-animation: animate-red 3s linear 2s infinite alternate;
  animation: animate-red 3s linear 2s infinite alternate;
}
/*Animation Red*/

@-webkit-keyframes animate-red {
  0% {
    background: red;
  }
  50% {
    background: yellow;
  }
  100% {
    background: green;
  }
}
<div class="pole">
<div class="rounded-post"></div>
<div class="red-light"></div>
  </div>

For the Arrow you can use http://fontawesome.io/ icons ( you can color them however you want)

The idea is to use position: relative and absolute to position your elements. Also you can use css animations to make the lights ON/OFF