Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@for $i from 1 through 8 {
  .main .line:nth-child(#{$i}){
    transform: rotate3d(0, 0, 1, 22.5deg * $i);
  }
}

$border: 10px;
$r: 210px - $border;
$pi: 3.141592653589793;

@for $i from 1 through 4 {
  .main .line:nth-child(#{$i}):before{
    top: $r - (cos((4 - $i )*$pi/8)*$r);
  }
}

@for $i from 5 through 8 {
  .main .line:nth-child(#{$i}):before{
    top: $r - (cos((4 - $i )*$pi/8)*$r);
  }
}

SassMeister-output.css

.main .line:nth-child(1) {
  transform: rotate3d(0, 0, 1, 22.5deg);
}

.main .line:nth-child(2) {
  transform: rotate3d(0, 0, 1, 45deg);
}

.main .line:nth-child(3) {
  transform: rotate3d(0, 0, 1, 67.5deg);
}

.main .line:nth-child(4) {
  transform: rotate3d(0, 0, 1, 90deg);
}

.main .line:nth-child(5) {
  transform: rotate3d(0, 0, 1, 112.5deg);
}

.main .line:nth-child(6) {
  transform: rotate3d(0, 0, 1, 135deg);
}

.main .line:nth-child(7) {
  transform: rotate3d(0, 0, 1, 157.5deg);
}

.main .line:nth-child(8) {
  transform: rotate3d(0, 0, 1, 180deg);
}

.main .line:nth-child(1):before {
  top: 123.46331px;
}

.main .line:nth-child(2):before {
  top: 58.57864px;
}

.main .line:nth-child(3):before {
  top: 15.22409px;
}

.main .line:nth-child(4):before {
  top: 0px;
}

.main .line:nth-child(5):before {
  top: 15.22409px;
}

.main .line:nth-child(6):before {
  top: 58.57864px;
}

.main .line:nth-child(7):before {
  top: 123.46331px;
}

.main .line:nth-child(8):before {
  top: 200px;
}