2017-08-10 41 views
0

我已經接近這個工作,但是在顯示彩虹輪的所有12個部分時遇到問題。我意識到這將是非常簡單的事情(奧卡姆剃刀)。我遵循這個輝煌的教程:Dig deep into CSS linear gradients,但我正在倒在最後的障礙。CSS線性漸變彩虹輪...沒有顯示全部12個部分

這裏是一個工作Codepen:https://codepen.io/snarf1974/pen/aywZZJ

body { background: white; } 
.colorWheel { 
    position: relative; 
    margin: 1em auto; 
/* border: solid 2em white; */ 
    width: 16em; height: 16em; 
    border-radius: 50%; 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
    background: 
    linear-gradient(30deg, #9bcb61 36.78%, transparent 36.78%), 
    linear-gradient(60deg, #f6e04e 68.41%, transparent 68.41%), 
    linear-gradient(-30deg, #f0463e 36.78%, transparent 36.78%) 100% 0, 
    linear-gradient(-60deg, #f57d42 68.41%, transparent 68.41%) 100% 0, 
    linear-gradient(-30deg, transparent 36.78%, #f9a260 36.78%) 100% 0, 
    linear-gradient(30deg, transparent 63.22%, #c14273 36.78%) 100% 100%, 

    linear-gradient(60deg, transparent 31.59%, #86489b 31.59%) 100% 100%, 
    linear-gradient(-30deg, #008fca 63.22%, transparent 63.22%) 100% 100%, 
    linear-gradient(-60deg, #00bced 31.59%, transparent 31.59%) 100% 100%, 
    linear-gradient(-30deg, transparent 63.22%, #82ba75 63.22%) 0 100%, 
    linear-gradient(-60deg, transparent 31.59%, #00b8a9 31.59%) 0 100%, 

    #f4c64d linear-gradient(#00bced, #00bced) 50% 100%; 
    background-repeat: no-repeat; 
    background-size: 50% 50%; 
} 
.colorWheel:after { 
    position: absolute; 
    top: 50%; left: 50%; 
    margin: -7em; 
    width: 14em; height: 14em; 
    border-radius: 50%; 
    background: white; 
    content: ''; 
} 

.center { 
    text-align: center; 
     position: absolute; 
     top: 22%; 
     transform: translateY(-50%); 
     padding: 1.5em; 
     font-size: 1.4em; 
     font-color: black; 
     z-index: 1; 
     -ms-transform: rotate(315deg); 
     transform: rotate(315deg); 
} 

誰能有何啓示?

回答

2

我只在你的問題中看到11種顏色:粉紅色,黃色,青色,橙色,綠色,lawngreen,紅色,紫紅色,黑色,熱水瓶,紫色。

我加入了草綠之前這條線上,它似乎工作:

linear-gradient(30deg, transparent 63.61%, blue 31.59%) 100% 100%, 

body { background: white; } 
 

 
.colorWheel { 
 
    position: relative; 
 
    margin: 1em auto; 
 
    /* border: solid 2em white; */ 
 
    width: 16em; height: 16em; 
 
    border-radius: 50%; 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    background: 
 
    linear-gradient(30deg, #9bcb61 36.78%, transparent 36.78%) 0 0, 
 
    linear-gradient(60deg, #f6e04e 63.22%, transparent 63.22%) 0 0, 
 
    linear-gradient(90deg, #f4c64d 100%, transparent 100%) 0 0, 
 
    linear-gradient(-30deg, #f0463e 36.78%, transparent 36.78%) 100% 0, 
 
    linear-gradient(-60deg, #f57d42 63.22%, transparent 63.22%) 100% 0, 
 
    
 
    linear-gradient(30deg, transparent 63.22%, #c14273 63.22%) 100% 100%, 
 
    linear-gradient(60deg, transparent 36.78%, #86489b 36.78%) 100% 100%, 
 
    linear-gradient(90deg, transparent 0%, #008fca 0%) 100% 100%, 
 
    linear-gradient(-30deg, transparent 63.22%, #82ba75 63.22%) 0 100%, 
 
    linear-gradient(-60deg, transparent 36.78%, #00b8a9 36.78%) 0 100%, 
 
    
 
    #f9a260 linear-gradient(#00bced, #00bced) 50% 100%; 
 
    background-repeat: no-repeat; 
 
    background-size: 50% 50%; 
 
} 
 

 
.colorWheel:after { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    margin: -7em; 
 
    width: 14em; height: 14em; 
 
    border-radius: 50%; 
 
    background: white; 
 
    content: ''; 
 
} 
 

 
.center { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 22%; 
 
    transform: translateY(-50%); 
 
    padding: 1.5em; 
 
    font-size: 1.4em; 
 
    font-color: black; 
 
    z-index: 1; 
 
    -ms-transform: rotate(315deg); 
 
    transform: rotate(315deg); 
 
}
<div class='colorWheel'> 
 
    <div class='center'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
</div>

+0

感謝這麼多,我想這將是一些簡單。我更新了我的codepen和上面的代碼。我試圖讓所有部分相同,使用這個:sin30°/(sqrt(2)* cos15°)= 0.3678因此,色阻的%值是36.78。我也爲60deg做了這個,但這些部分仍然不相同。 – snarf1974

+0

任何人都可以告訴我如何拆分在這個彩虹輪的部分平等?我將360/12 = 30分爲30度,使用sin30°/(sqrt(2)* cos15°),但看起來並不正確:[https://codepen.io/snarf1974/pen/aywZZJ] – snarf1974

+0

@ snarf1974 - 抱歉,我錯過了您的第一條評論。我修改了我的代碼。這是'68.41'計算結果。它應該是'63.22',我相信 – Jonathan