CSSリニアグラデーションレインボーホイール...すべての12セクションを表示していません

Question

私はこの機能をほとんど持っていますが、レインボーホイールの12のセクションすべてを表示することに問題があります。私はそれが信じられないほど単純なものになることに気づきます（オッカムの剃刀）。私はこの華麗なチュートリアルに続きました：Dig deep into CSS linear gradientsしかし、最後のハードルに落ちています。ここで

は作業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); 
} 

誰もが任意の光を当てることができますか？

Answer 1

あなたの質問には、ピンク、イエロー、シアン、オレンジ、グリーン、バンゴー、赤、フクシア、黒、ホットピンク、パープルの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>