#container {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #EEE;
  border: 1px solid #CCC;
}

.shape {
  position: absolute;
  cursor: move;
}

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

.square {
  width: 80px;
  height: 80px;
  background-color: #0F0;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid #00F;
}

.pentagon {
  width: 80px;
  height: 0;
  position: relative;
}

.pentagon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid #FF0;
}

.pentagon:after {
  content: "";
  position: absolute;
  top: 80px;
  left: 0;
  width: 80px;
  height: 0;
  background-color: #FF0;
}