html - CSS线性渐变彩虹轮…未显示全部12个部分

我几乎可以完成这项工作，但是在显示彩虹轮的所有12个部分时遇到了问题。我意识到这将变得非常简单（Occam的剃刀）。我遵循了这个精妙的教程：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);
}

谁能阐明任何想法？

最佳答案

我只在您的问题中看到11种颜色：粉红色，黄色，青色，橙色，绿色，草坪绿，红色，紫红色，黑色，粉红色，紫色。

我在草坪绿之前添加了这一行，它似乎可以工作：

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>

关于html - CSS线性渐变彩虹轮…未显示全部12个部分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45617355/