13

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

введите сюда описание изображения

4
  • 1
    Что-нибудь вроде такого: codepen.io/AtomicNoggin/pen/fEish ? 7 июн 2017 в 13:35
  • 1
    Делаем круглый треугольник и вращаем.
    – Qwertiy
    7 июн 2017 в 15:02
  • @Qwertiy "круглый треугольник" это сильно! :)
    – Isaev
    14 июн 2017 в 13:15
  • @Isaev, зато понятно. Кстати, там ответ есть с этим треугольником.
    – Qwertiy
    14 июн 2017 в 14:22

4 ответа 4

10

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

1
  • Очевидный плюс в отличие от остальных решений - обводка секторов
    – Crantisz
    8 июн 2017 в 6:01
9

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

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>

3
  • круглый треугольник - это несколько иное 14 мар 2020 в 6:33
  • @StrangerintheQ, тот, у которого все 3 стороны круглые, в этом вопросе не нужен :)
    – Qwertiy
    14 мар 2020 в 7:03
  • ага, треугольник Рёло, а в ответе же сектор 14 мар 2020 в 7:04
8
  1. Делаем градиентами три одноцветных полукруга (как предложил @nueq).
  2. Поворачиваем их по трём направлениям.
  3. Добавляем 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>

2
  • 1
    Прикольный способ, но все 6 цветов задать не удастся.
    – Qwertiy
    7 июн 2017 в 17:10
  • 1
    @Qwertiy, потому что обозреватели работают с цветами через одно место. По хорошему, перед смешиванием цветов их надо линеаризовывать гамма-коррекцией. Но я сильно сомневаюсь, что хоть какой-то из обозревателей это делает. 8 июн 2017 в 2:16
1

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

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

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

1
  • На html тоже можно.
    – Qwertiy
    7 июн 2017 в 15:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.