div {
 margin: 20px;
}   

#square {
  background-color:red;
    width: 50px;
    height: 50px;
}

#rectangle {
  background-color:orange;
    width: 100px;
    height: 50px;
}

#diamond {
  background-color:gold;
    width: 50px;
    height: 50px;
    transform: rotate(45deg);
}

#circle {
  background-color:green;
    width: 50px;
    height: 50px;
    border-radius:50%
}

#oval {
  background-color:blue;
    width: 100px;
    height: 50px;
    border-radius:50%
}

#triangle-up {
  width: 0px;
  height: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid indigo;
}

#triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid violet;
}

#trapezoid {
  width: 60px;
  height: 0px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 45px solid lime;
}