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>