point.css

   /* <div class="point green"></div> */
   .point{
     width: 30px;
     height: 30px;
     background-image: none;
     margin: -35px 0 0 -15px;
     border-radius: 50% 50% 50% 0;
     background: #999999;
     transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
     position: absolute;
     top:100px;
     left:100px;
   }
   .point:after{
      content: '';
      width: 14px;
      height: 14px;
      margin: 8px 0 0 8px;
      background: #2F2F2F;
      position: absolute;
      border-radius: 50%;
   }
   .green{
     left:140px;
     background-color: #25C19E;
   }
   .green2{
     left:180px;
     background-color: #5CC151;
   }
   .orange{
     left:220px;
     background-color: #F68954;
   }
   .purge{
     left:260px;
     background-color: #C354F6;
   }
   .purge2{
     left:300px;
     background-color: #C52A82;
   }
   .yellow{
     left:340px;
     background-color: #E3C44A;
   }