Нужен наиболее верный способ. Можно для примера разделить круг на 3 сегмента.
-
1Что-нибудь вроде такого: codepen.io/AtomicNoggin/pen/fEish ?– pocketgulag7 июн 2017 в 13:35
-
1Делаем круглый треугольник и вращаем.– Qwertiy ♦7 июн 2017 в 15:02
-
@Qwertiy "круглый треугольник" это сильно! :)– Isaev14 июн 2017 в 13:15
-
@Isaev, зато понятно. Кстати, там ответ есть с этим треугольником.– Qwertiy ♦14 июн 2017 в 14:22
4 ответа
Вот такая функция, рисующая сектора на 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>
Делаем круглый треугольник из подрезанного полукруга, потом вращаем эти треугольники, чтобы получился круг:
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>
-
-
@StrangerintheQ, тот, у которого все 3 стороны круглые, в этом вопросе не нужен :)– Qwertiy ♦14 мар 2020 в 7:03
-
- Делаем градиентами три одноцветных полукруга (как предложил @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>
-
1
-
1@Qwertiy, потому что обозреватели работают с цветами через одно место. По хорошему, перед смешиванием цветов их надо линеаризовывать гамма-коррекцией. Но я сильно сомневаюсь, что хоть какой-то из обозревателей это делает. 8 июн 2017 в 2:16
Если на 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/)