Svg色圈

Question

我认为自己对CSS非常好，但我刚开始研究一些事情，我意识到我不知道如何处理：一个色轮。像这样：

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

编辑：如果它可以是“干净”（就像这些部分是正确的个别形状而不是放在彼此之上的较大形状）所以我可以稍后为各个部分设置动画，就像在悬停时弹出它们一样对人好点。我知道如果不能这样做的话。

Answer 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>

Answer 2

这真的应该在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>

Answer 3

这不是我的工作，但我跑过这个四色轮，这将是一个全css版本的出色起点：

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 4

您可以通过使用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%);
}

<div class="color-wheel"></div>

使用Sass或Less之类的预处理器（使用循环，并避免使用CSS变量进行笨重的计算），上面的代码更容易编写。

如何用CSS制作色轮结构？

4 个答案:

Svg色圈