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

11

Вот такая функция, рисующая сектора на 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 you have read our privacy policy.

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