（この図は20件の角度を持っている必要があります）、誰もが右の正多角形を作成する方法を理解するために私を助けてもらえ</p> <p>をSCSS

Question

上の三角の数字を作成する私はここにhttp://codepen.io/anon/pen/MpbeLB

（このcode.Theのため申し訳ありませんが最初の一歩を踏み出し

この式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>