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

#html #css #svg #color

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


    

Ответы

Ответ 1

Вот такая функция, рисующая сектора на 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)



Ответ 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 {
  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);
}

  

  

  

  

  

  

  




Ответ 3

Делаем градиентами три одноцветных полукруга (как предложил @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;
}



Ответ 4

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



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






Если больше сегментов - SVG (тут рисовать самому) либо Canvas (пример библиотеки
- http://canvasjs.com/html5-javascript-pie-chart/)