Как сверстать круг, разделенный на цвета

432

09 июня 2017, 09:05

Нужен наиболее верный способ. Можно для примера разделить круг на 3 сегмента.

Answer 1

Делаем градиентами три одноцветных полукруга (как предложил @nueq).
Поворачиваем их по трём направлениям.
Добавляем background-blend-mode: multiply; (не работает в IE и Edge).

Получаем шесть разноцветных секторов. Трудность в том, чтобы подобрать правильные ингредиенты ;) У меня получилось без оранжевого сектора.

https://codepen.io/glebkema/pen/PjPPjJ

.colors { 
  background: 
    linear-gradient(    0deg, #f0f 50%, transparent 50% ), 
    linear-gradient(  120deg, #ff0 50%, transparent 50% ), 
    linear-gradient( -120deg, #0ff 50%, transparent 50% ); 
  background-blend-mode: multiply; 
  border-radius: 50%; 
  margin: 0 auto; 
  width: 300px; height: 300px; 
}

<div class="colors"></div>

Answer 2

Делаем круглый треугольник из подрезанного полукруга, потом вращаем эти треугольники, чтобы получился круг:

section { 
  width: 10em; 
  height: 5em; 
  outline: 1px dotted red; 
  margin: 1em; 
  float: left; 
} 
 
.circle { 
  height: 100%; 
  width: 100%; 
  background: silver; 
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
  transform-origin: center bottom; 
} 
 
.triangle { 
  height: 100%; 
  width: 100%; 
  transform-origin: center bottom; 
  overflow: hidden; 
} 
 
.triangle .circle { 
  transform: rotate(120deg); 
} 
 
.chart { 
  position: relative; 
  height: auto; 
  overflow: hidden; /* .triangle выходят за пределы */ 
} 
 
.chart:before { 
  content: ""; 
  display: block; 
  padding-top: 100%; 
} 
 
.chart .triangle { 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 50%; 
  height: 50%; 
}

<section> 
  <div class="circle"></div> 
</section> 
 
<section> 
  <div class="triangle"> 
    <div class="circle"></div> 
  </div> 
</section> 
 
<section class="chart"> 
  <div class="triangle" style="transform:rotate(   0deg)"><div class="circle" style="background:#000"></div></div> 
  <div class="triangle" style="transform:rotate( -60deg)"><div class="circle" style="background:#F00"></div></div> 
  <div class="triangle" style="transform:rotate(-120deg)"><div class="circle" style="background:#0F0"></div></div> 
  <div class="triangle" style="transform:rotate(-180deg)"><div class="circle" style="background:#00F"></div></div> 
  <div class="triangle" style="transform:rotate(-180deg)"><div class="circle" style="background:#00F"></div></div> 
  <div class="triangle" style="transform:rotate(-240deg)"><div class="circle" style="background:#F0F"></div></div> 
  <div class="triangle" style="transform:rotate(-300deg)"><div class="circle" style="background:#FF0"></div></div> 
</section>

Ну и окончательный код:

section { 
  width: 12em; 
  margin: auto; 
} 
 
.chart { 
  position: relative; 
  overflow: hidden; /* .triangle выходят за пределы */ 
} 
 
.chart:before { 
  content: ""; 
  display: block; 
  padding-top: 100%; 
} 
 
.triangle { 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 50%; 
  transform-origin: center bottom; 
  overflow: hidden; 
} 
 
.circle { 
  height: 100%; 
  width: 100%; 
  background: silver; 
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
  transform-origin: center bottom; 
  transform: rotate(120deg); 
}

<section class="chart"> 
  <div class="triangle" style="transform:rotate(   0deg)"><div class="circle" style="background:#ff7f00"></div></div> 
  <div class="triangle" style="transform:rotate( -60deg)"><div class="circle" style="background:#ff0000"></div></div> 
  <div class="triangle" style="transform:rotate(-120deg)"><div class="circle" style="background:#9400d3"></div></div> 
  <div class="triangle" style="transform:rotate(-180deg)"><div class="circle" style="background:#4b0082"></div></div> 
  <div class="triangle" style="transform:rotate(-180deg)"><div class="circle" style="background:#0000ff"></div></div> 
  <div class="triangle" style="transform:rotate(-240deg)"><div class="circle" style="background:#00ff00"></div></div> 
  <div class="triangle" style="transform:rotate(-300deg)"><div class="circle" style="background:#ffff00"></div></div> 
</section>

Answer 3

Вот такая функция, рисующая сектора на SVG:

var drSegment = function (style, ange1, ange2) { 
 
        var dir = "0"; 
        if (angle2 - angle1 > 0.5 ) dir = "1"; 
        var angle1 = Math.PI * 2 * ange1; 
        var angle2 = Math.PI * 2 * ange2; 
         
        var rad=300, cx=350, cy=350; 
         
        var dx1 = Math.sin(angle1) * rad + cx; 
        var dy1 = -Math.cos(angle1) * rad + cy; 
         
        var dx2 = Math.sin(angle2) * rad + cx; 
        var dy2 = -Math.cos(angle2) * rad + cy;  
         
        var el= document.createElementNS( 'http://www.w3.org/2000/svg', 'path'); 
         
        el.setAttribute('style', style); 
        el.setAttribute('d', ' M '+dx1+','+dy1+' A '+rad+','+rad+' 0 ' + dir + ' 1 ' + dx2 + ',' + dy2 + ' L '+cx+','+cy+' Z'); 
 
        document.getElementById('s').appendChild(el); 
         
} 
 
drSegment('fill:red; stroke:black; stroke-width:3;', -1/6, 1/6) 
drSegment('fill:yellow; stroke:black; stroke-width:3;', 1/6, 3/6) 
drSegment('fill:blue; stroke:black; stroke-width:3;', 3/6, 5/6)

<svg id='s' width="100%"  viewBox="0 0 700 700"></svg>

Answer 4

Если на 2 - можно градиентом:

.gradient-circle{ 
width: 100px; 
height: 100px; 
border-radius: 50%; 
background: linear-gradient(to left, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); 
}