在 SCSS 上创建三角图形

Question

谁能帮我理解如何制作一个正确的正多边形（这个数字必须有20个角度）

我在这里迈出了第一步http://codepen.io/anon/pen/MpbeLB

（抱歉这段代码。stackoverflow 不支持 SCSS）

我使用这个公式http://ru.wikipedia.org/wiki/Правильный_многоугольник 来查找正多边形的顶部。

$colorBackground: #121d1e;
$colorC: #ace9ae;
$colorW: #fff;

$h: 600px;
$w: $h /0.75;

@mixin br($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

@mixin br50 {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

@function pi() {
  @return 3.14159265359;
}

@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  } @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function rad($angle) {
  $unitless: $angle / ($angle * 0 + 1);
  $unitless: $unitless / 180 * pi();
  @return $unitless;
}

@function sin($angle) {
  $sin: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
  }
  @return $sin;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos;
}
@function tan($angle) {
  @return sin($angle) / cos($angle);
}




.mainBlock {
  position: relative;
  display: inline-block;
  width: $w;
  height: $h;
  border: 1px solid #f00;
}

.centralCircle {
  position: absolute;
  top: 50%;
  left: 50%;

  margin-top: (-$h*0.1);
  margin-left: (-$h*0.1);
  width: $h *0.2;
  height: $h * 0.2;
  background-color: $colorC;
  @include br50;
  animation: centralWrapperMove 1s ease-in infinite alternate;
}



@keyframes centralDotMove {
  0% {
    transform: scale(1);
    transform-origin: center center;
  }
  100% {
    transform: scale(0);
    transform-origin: center center;
  }
}

@keyframes centralWrapperMove {
  0% {
    transform: scale(1);
    transform-origin: center center;
  }
  100% {
    transform: scale(0.2);
    transform-origin: center center;
  }
}

$workW: $w;
$workH: ($h/0.75);
$maxScale: 0.03;
$borderScale: 0.2;

$workerHeight: $workH*$maxScale;
$workerWidth: $workW*$maxScale;

.workerCircle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $workerWidth;
  height: $workerHeight;
  margin: (-$workH*$maxScale/2) 0 0 (-$workW*$maxScale/2);
  @include br50;
  border: ($workerWidth*$borderScale) solid red;
  z-index: 2;

  $n: 20;
  $r: 180px;
  $mygrad: 18; /// angels
 

  $fi: (pi())/2;


  @for $i from 1 through 20 {
    &:nth-of-type(#{$i}) {
      $j: ($i - 1);

transform: translate(($r* cos(($mygrad*$j)+ ( (2*pi()*$j)/$n))), ($r* sin(($mygrad*$j)+ ((2*pi()*$j)/$n))));
                       /// This formula works wrong
    }

  }

 .workerDot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: $workerWidth/4;
    height: $workerHeight/4;
    margin: (-$workerWidth/8) 0 0 (-$workerHeight/8);
    @include br50;
    background: #fff;

  }

}

.wrappen {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

}

<div class="mainBlock">
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
</div>

当前代码输出：

Answer 1

快速修复

您可以将您在问题中标记为无法正常工作的翻译简化为：

transform: translate($r * cos($mygrad * $j), $r * sin($mygrad * $j));

那好像是work fine。

---

替代解决方案

让 CSS 为你做旋转更容易，就像在this Codepen 中一样。我基于你的例子，但做了很多修改。

基本思想是利用 CSS transform 指令。将每个圆圈放在顶部，然后将其旋转到正确的位置。这里包含一个只有 6 个圆圈的较小示例，链接的 Codepen 有一个用于圆圈数的变量，因为它使用 SCSS。

在此演示中，圆圈以正多边形的角为中心，但如果您愿意，应该很容易更改。

.mainBlock {
  position: relative;
  width: 500px;
  height: 500px;
  
  border: 1px solid red;
}

.workerCircle {
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  
  border: 1px solid red;
  border-radius: 50%;
}

.workerCircle:nth-of-type(1) { transform: rotate( 60deg) translate(0, -190px); }
.workerCircle:nth-of-type(2) { transform: rotate(120deg) translate(0, -190px); }
.workerCircle:nth-of-type(3) { transform: rotate(180deg) translate(0, -190px); }
.workerCircle:nth-of-type(4) { transform: rotate(240deg) translate(0, -190px); }
.workerCircle:nth-of-type(5) { transform: rotate(300deg) translate(0, -190px); }
.workerCircle:nth-of-type(6) { transform: rotate(360deg) translate(0, -190px); }

<div class="mainBlock">
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
  <div class="workerCircle"></div>
</div>