【问题标题】：How can I make a color wheel structure with CSS?如何使用 CSS 制作色轮结构？
【发布时间】：2020-03-14 21:39:43
【问题描述】：

我认为自己在 CSS 方面做得很好，但我刚开始做一些我意识到我不知道如何处理的东西：色轮。像这样：

这甚至可以在 CSS 中完成吗？如果是这样，怎么做？如果没有必要，我宁愿不必在画布上制作它。 SVG 也是如此，但我更喜欢画布。

编辑：如果它可以是“干净的”（就像这些部分是正确的单个形状，而不是彼此重叠的较大形状），那么我可以稍后为各个部分设置动画，比如在悬停时将它们弹出，那将对人好点。我理解如果不能那样做的话。

【问题讨论】：

这是一种方法。不是我的笔codepen.io/bitmap/pen/eBbHt
我会说 SVG 可能是你最好的选择。这样，您可以使用 CSS 定位各个部分以添加悬停效果等。

标签： css

【解决方案1】：

请注意这是一支经过修改的分叉笔

body {
  margin: 60px auto;
  background: #F5F5F7;
}

#colorWheel {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  -webkit-transform-origin: 50px 150px;
  -moz-transform-origin: 50px 150px;
  -ms-transform-origin: 50px 150px;
  -o-transform-origin: 50px 150px;
  transform-origin: 50px 150px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
#colorWheel span {
  position: absolute;
  -webkit-transform-origin: 50% 50%;
  border-style: solid;
  border-width: 150px 50px;
  box-sizing: border-box;
}

#colorWheel span.color01 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  border-color: #43a1cd transparent transparent transparent;
}

#colorWheel span.color02 {
  -webkit-transform: rotate(36deg);
  -moz-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -o-transform: rotate(36deg);
  transform: rotate(36deg);
  border-color: #639b47 transparent transparent transparent;
}

#colorWheel span.color03 {
  -webkit-transform: rotate(72deg);
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  transform: rotate(72deg);
  border-color: #9ac147 transparent transparent transparent;
}

#colorWheel span.color04 {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
  border-color: #e1e23b transparent transparent transparent;
}

#colorWheel span.color05 {
  -webkit-transform: rotate(144deg);
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  transform: rotate(144deg);
  border-color: #f7941e transparent transparent transparent;
}

#colorWheel span.color06 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  border-color: #ba3e2e transparent transparent transparent;
}

#colorWheel span.color07 {
  -webkit-transform: rotate(216deg);
  -moz-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -o-transform: rotate(216deg);
  transform: rotate(216deg);
  border-color: #9a1d34 transparent transparent transparent;
}

#colorWheel span.color08 {
  -webkit-transform: rotate(252deg);
  -moz-transform: rotate(252deg);
  -ms-transform: rotate(252deg);
  -o-transform: rotate(252deg);
  transform: rotate(252deg);
  border-color: #662a6c transparent transparent transparent;
}

#colorWheel span.color09 {
  -webkit-transform: rotate(288deg);
  -moz-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  -o-transform: rotate(288deg);
  transform: rotate(288deg);
  border-color: #272b66 transparent transparent transparent;
}

#colorWheel span.color10 {
  -webkit-transform: rotate(324deg);
  -moz-transform: rotate(324deg);
  -ms-transform: rotate(324deg);
  -o-transform: rotate(324deg);
  transform: rotate(324deg);
  border-color: #2d559f transparent transparent transparent;
}

#colorWheel:before {
  content: "";
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: absolute;
  top: -30px;
  left: -130px;
  border-radius: 100%;
  border: 30px solid #ffffff;
  z-index: 100;
}

#colorWheel:after {
  content: "";
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: 100px;
  left: 0px;
  border-radius: 100%;
  background: #ffffff;
}

<div id="colorWheel">
  <span class="color01"></span>
  <span class="color02"></span>
  <span class="color03"></span>
  <span class="color04"></span>
  <span class="color05"></span>
  <span class="color06"></span>
  <span class="color07"></span>
  <span class="color08"></span>
  <span class="color09"></span>
  <span class="color10"></span>
</div>

【讨论】：

我前段时间叉出并修改过的一支笔
@MichaelCoker 是的，那是笔。你注意到我的代码中的修改了吗？
你把动画拿出来了？
动画和悬停并将其转换为css（不使用less）..我试图制作一个颜色html选择器......
对 - 你把动画拿出来了。悬停类仅用于引用动画。并且“将其转换为 css”是在 codepen 中单击 2 次 - 我不认为这是“修改”。

【解决方案2】：

您可以通过使用conical gradients 并为每种颜色指定停止点，从而在 CSS 中实现这一点，因此它们被明确分隔。

在您的特定情况下，您有 12 种颜色，这意味着每个停止点将位于 100% / 12 = 8.333%。颜色 1 从 0 到 8.333%，颜色 2 从 8.333% 到 16.666%，颜色 3 从 16.666% 到 25%，等等。语法如下（使用 fake 颜色）：

background: conic-gradient(red 0% 8.333%, blue 8.333% 16.666%, ..... );

锥形渐变是just fairly-supported at the moment 撰写此答案：Chrome、基于 Chromium 的浏览器和 Safari 支持它； Firefox 仅通过激活一个标志（希望它很快会得到完全支持）； Edge（Chromium 之前）、IE 或移动设备上对它的支持参差不齐。

这是在 CSS 中使用锥形渐变和变量创建色轮的一种方法：

.color-wheel {
  --num-colors: 12;
  --color-size: calc(100% / var(--num-colors));
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(
    #f22 calc(0 * var(--color-size)) calc(1 * var(--color-size)), 
    #f06 calc(1 * var(--color-size)) calc(2 * var(--color-size)), 
    #63b calc(2 * var(--color-size)) calc(3 * var(--color-size)), 
    #44b calc(3 * var(--color-size)) calc(4 * var(--color-size)), 
    #09f calc(4 * var(--color-size)) calc(5 * var(--color-size)), 
    #0af calc(5 * var(--color-size)) calc(6 * var(--color-size)), 
    #0bd calc(6 * var(--color-size)) calc(7 * var(--color-size)), 
    #098 calc(7 * var(--color-size)) calc(8 * var(--color-size)), 
    #0a4 calc(8 * var(--color-size)) calc(9 * var(--color-size)), 
    #7c3 calc(9 * var(--color-size)) calc(10 * var(--color-size)), 
    #fe0 calc(10 * var(--color-size)) calc(11 * var(--color-size)), 
    #fb0 calc(11 * var(--color-size)) calc(12 * var(--color-size))
  );
  transform: rotate(calc(-180deg / var(--num-colors)));
}

.color-wheel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: white;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

&lt;div class="color-wheel"&gt;&lt;/div&gt;

使用 Sass 或 Less 之类的预处理器编写上面的代码会更简单（使用循环，并避免使用 CSS 变量进行庞大的计算）。

【讨论】：

但我同意其他 cmets/answers：虽然问题（和此解决方案）与 CSS 有关，但最好使用 SVG。

【解决方案3】：

这确实应该在 svg 中创建，因为它是 css 的复杂形状。

Svg 色环

svg {
  stroke: white;
  stroke-width: 0.1;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="piePiece" d="M 42.2,78.9 46.1,64.4 Q 50,65 53.88,64.48 L 57.7,78.9 Q 50,80 42.2,78.9Z" />
  </defs>
  <use xlink:href="#piePiece" fill="#2D8633"/>
  <use xlink:href="#piePiece" transform="rotate(30,50,50)" fill="#236467"/>
  <use xlink:href="#piePiece" transform="rotate(60,50,50)" fill="#2E4172"/>
  <use xlink:href="#piePiece" transform="rotate(90,50,50)" fill="#413075"/>
  <use xlink:href="#piePiece" transform="rotate(120,50,50)" fill="#592A71"/>
  <use xlink:href="#piePiece" transform="rotate(150,50,50)" fill="#8A2E60"/>
  <use xlink:href="#piePiece" transform="rotate(180,50,50)" fill="#AA3C39"/>
  <use xlink:href="#piePiece" transform="rotate(210,50,50)" fill="#AA6D39"/>
  <use xlink:href="#piePiece" transform="rotate(240,50,50)" fill="#AA8539"/>
  <use xlink:href="#piePiece" transform="rotate(270,50,50)" fill="#AA9739"/>
  <use xlink:href="#piePiece" transform="rotate(300,50,50)" fill="#A9AA39"/>
  <use xlink:href="#piePiece" transform="rotate(330,50,50)" fill="#A9AA39"/>
</svg>

【讨论】：

【解决方案4】：

这不是我的工作，但我遇到了这个四色轮，这将是一个全 CSS 版本的绝佳起点：

http://jsfiddle.net/elias94xx/3rx7w/2/

.chart {
  position: absolute;
  width:0;
  height:0;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

#chart1 {
  border-right:60px solid red;
  border-top:60px solid transparent;
  border-left:60px solid transparent;
  border-bottom:60px solid transparent;
}

#chart2 {
  border-right:60px solid transparent;
  border-top:60px solid green;
  border-left:60px solid transparent;
  border-bottom:60px solid transparent;
}

#chart3 {
  border-right:60px solid transparent;
  border-top:60px solid transparent;
  border-left:60px solid blue;
  border-bottom:60px solid transparent;
}

#chart4 {
  border-right:60px solid transparent;
  border-top:60px solid transparent;
  border-left:60px solid transparent;
  border-bottom:60px solid yellow;
}

<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>

【讨论】：