All geek questions in one place

How can I create a color wheel structure using CSS?

I consider myself very good with CSS, but I just started working on what I realized, I have no idea how to approach: the color wheel. Like this:

enter image description here

Can this be done in CSS? If so, how? I would rather not do it on canvas, if not needed. The same goes for SVG, but I would prefer it on canvas.

Edit: if it can be “clean” (for example, sections are the correct individual figures, and not larger figures superimposed on each other), so I could animate separate sections later, for example, pop them out on hover, which is beautiful . I understand that if this is impossible to do, though.

+4
source share
3 answers

,

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>
Hide result
+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>
Hide result
+2

This is not my job, but I came across this four-color wheel, which will be a great starting point for the cs-css version:

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>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1674257/

More articles:


All Articles