$base: #CCC;
$size: 50px;
$opacity: 1.5;

@for $i from 0 to 5 {
 .point:nth-child(#{$i+1}) {
    -webkit-transform: rotate($i * 360deg / 5);
    transform: rotate($i * 360deg / 5);
  } 
}

body {
   background: #033; 
}

.point {
  position: absolute;
  width: 0;
  height: 0;
  opacity: $opacity;
}

.penta1 .point {
  border-left: $size solid transparent;
  border-bottom: $size solid transparent;
  border-top: $size solid $base;
}

.penta2 .point {
  border-right: $size solid transparent;
  border-bottom: $size solid transparent;
  border-top: $size/2 solid $base;
}

.penta7 .point {
  border-right: 2*$size solid transparent;
  border-bottom: $size solid transparent;
  border-top: $size/2 solid $base;
}

.penta12 .point {
  border-right: $size solid transparent;
  border-left: $size solid transparent;
  border-top: $size solid $base;
}

.penta5 .point {
  width: $size;
  border-right: $size solid transparent;
  border-left: $size solid transparent;
  border-top: $size solid $base;
}

.penta6 .point {
  width: 0.6*$size;
  height: 2*$size;
  border: 2px solid $base;
}

.penta3 .point {
  width: 2*$size;
  height: 1.4*$size;
  border: 2px solid $base;
}  


.penta8 .point {
  width: 0.4*$size;
  border-radius: $size;
  height: $size;
   -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  background: $base;
}


.penta9 .point {
  width: 2*$size;
  height: 0.8*$size;
  background: $base;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  border-radius: $size/10;
}

.penta10 .point {
  width: 2*$size;
  height: 0.5*$size;
  background: $base;
   -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  border-radius: $size/10;
}

.penta11 .point {
    width: 0.7*$size;
    height: $size;
    border: 5px solid $base;
     -webkit-transform-origin: 0 60%;
    transform-origin: 0 60%;
    border-radius: $size;
}


.penta4 .point {  
    width: 0.5*$size;
    height: 0.5*$size;

    border: 20px solid $base;
     -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.penta13 .point {  
    width: $size;
    height: 0.25*$size;
    border-radius: $size;
    border: 10px solid $base;
     -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.penta14 .point {
    border-left: 2*$size solid transparent;
    border-bottom: 2*$size solid transparent;
    border-top: $size solid $base;
     -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.penta15 .point {
    width: $size;
    height: 0.1*$size;
    border-bottom: $size solid transparent;
    border-top: 0.3*$size solid $base;
     -webkit-transform-origin: 50% 75%;
    transform-origin: 50% 75%;
}

.penta16 .point {
    width: $size;
    height: 0.1*$size;
    border-bottom: $size solid $base;
    border-top: 0.1*$size solid $base;
     -webkit-transform-origin: 50% 75%;
    transform-origin: 50% 75%;
}

.thing {
  width: 2*$size;
  height: 2*$size;
  margin: 0.9*$size;
  float: left;
}

.container {
  width: 80%;
  max-width: 800px;
  margin: 0px auto;
  margin-top: 75px;
}