創建於SCSS

Question

三角人物

任何人可以幫助我瞭解如何作出正確的正多邊形（本圖必須有20角）

我在這裏做的第一步http://codepen.io/anon/pen/MpbeLB

（對不起，這code.The計算器這麼想的支持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個圓圈的小例子，因爲它使用SCSS，所以鏈接的Codepen具有圓圈數的變量。

在本演示中，在圓圈中心的正多邊形的角落，但它應該是很容易改變，如果你想要的。

.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>