Решение SVG + CSS
Окружность можно разделить на 6 отдельных секторов с помощью команды Elliptical Arc
для path
подробнее здесь
svg {
height: 440px;
width: 440px;
}
.sector {
fill: #5F5E5F;
stroke: #BFBFBF;
stroke-width:2;
}
:hover.sector {
fill:#9F45E2;
stroke-width:6;
stroke:#9F45E2;
transition: fill 0.5s, stroke-width 0.5s;
}
<svg viewBox='0 0 110 110'>
<path class="sector " d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
</svg>
svg {
height: 440px;
width: 440px;
}
.sector {
fill: #5F5E5F;
stroke: #BFBFBF;
stroke-width:2;
}
:hover.sector {
fill:#9F45E2;
stroke-width:6;
stroke:#9F45E2;
transition: fill 0.5s, stroke-width 0.5s;
<svg viewBox='0 0 110 110'>
<!-- Блок секторов -->
<path class="sector " d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
<path class="sector" d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' />
<path class="sector" d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' />
<path class="sector" d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' />
<path class="sector " d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
<path class="sector" d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' />
</svg>
Добавляем окружности для создания центральной части, добавляем текст и иконки.
Иконки брал здесь
Для придания нужного размера иконкам используем scale(0.7)
Для позиционирования икон используется команда translate(X Y)
Ниже полный код:
svg {
height: 440px;
width: 440px;
}
.sector {
fill: #5F5E5F;
stroke: #BFBFBF;
stroke-width:2;
}
:hover.sector {
fill:#9F45E2;
stroke-width:6;
stroke:#9F45E2;
transition: fill 0.5s, stroke-width 0.5s;
}
#F {
fill: #5F5E5F;
stroke: #BFBFBF;
}
#S {
fill: none;
stroke: #BFBFBF;
stroke-width:5;
}
#T {
fill: #707070;
stroke: #FFFFFF;
stroke-width:3;
}
.icon {
fill:none;
stroke:#CCCACD;
transition: fill 0.5s;
}
:hover.icon {
fill:#9F45E2;
}
</style>
<svg viewBox='0 0 110 110'>
<!-- Блок секторов -->
<path class="sector " d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
<path class="sector" d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' />
<path class="sector" d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' />
<path class="sector" d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' />
<path class="sector " d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
<path class="sector" d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' />
<circle id="F" cx='55' cy='55' r='25' />
<circle id="S" cx='55' cy='55' r='23' />
<circle id="T" cx='55' cy='55' r='22' />
<circle id="Big" cx='55' cy='55' r='50' fill="none" stroke="#BFBFBF" stroke-width="2" />
<text x="55" y="55" font-size="5" fill="white" font-weight="bold" text-anchor="middle" > Текст в круге </text>
<!-- Блок иконок -->
<path class="icon" transform="translate(47 10) scale(0.7)" d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"/>
<path class="icon" transform="translate(80 27) scale(0.7)" d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
<path class="icon" transform="translate(80 66) scale(0.7)" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/>
</svg>
JS
Разбить круг на любое количество секторов можно с помощью javascript
, который реализует формулу Elliptical Arc
для path
- Задаются переменные
fromAngle
, toAngle
начального и конечного
угла сектора
- Задаются переменные для расчета начальных и конечных координат
сектора
fromCoordX
, fromCoordY
, toCoordX
, toCoordY
- Вызов функции для рисования 6 секторов -
createSector(55, 55, 50, 6);
,
где
55
координаты центра окружности
50
- радиус окружности
6
- количество секторов
var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d;
function createSector(cx, cy, r, part) {
for (var i = 0; i < part; i++) {
path = document.createElementNS("http://www.w3.org/2000/svg", "path");
fromAngle = i * 360 / part;
toAngle = (i + 1) * 360 / part;
fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180));
fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180));
toCoordX = cx + (r * Math.cos(toAngle * Math.PI / 180));
toCoordY = cy + (r * Math.sin(toAngle * Math.PI / 180));
d = 'M' + cx + ',' + cy + ' L' + fromCoordX + ',' + fromCoordY + ' A' + r + ',' + r + ' 0 0,1 ' + toCoordX + ',' + toCoordY + 'z';
path.setAttributeNS(null, "d", d);
document.getElementById('pie').appendChild(path);
}
}
createSector(55, 55, 50, 6);
svg {
height: 220px;
width: 220px;
}
path {
fill: #5F5E5F;
stroke: #BFBFBF;
stroke-width:2;
}
<svg viewBox="0 0 110 110" id="pie"></svg>
8 секторов
var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d;
function createSector(cx, cy, r, part) {
for (var i = 0; i < part; i++) {
path = document.createElementNS("http://www.w3.org/2000/svg", "path");
fromAngle = i * 360 / part;
toAngle = (i + 1) * 360 / part;
fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180));
fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180));
toCoordX = cx + (r * Math.cos(toAngle * Math.PI / 180));
toCoordY = cy + (r * Math.sin(toAngle * Math.PI / 180));
d = 'M' + cx + ',' + cy + ' L' + fromCoordX + ',' + fromCoordY + ' A' + r + ',' + r + ' 0 0,1 ' + toCoordX + ',' + toCoordY + 'z';
path.setAttributeNS(null, "d", d);
document.getElementById('pie').appendChild(path);
}
}
createSector(55, 55, 50, 8);
svg {
height: 220px;
width: 220px;
}
path {
fill: #5F5E5F;
stroke: #BFBFBF;
stroke-width:2;
}
<svg viewBox="0 0 110 110" id="pie"></svg>
12 секторов
var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d;
function createSector(cx, cy, r, part) {
for (var i = 0; i < part; i++) {
path = document.createElementNS("http://www.w3.org/2000/svg", "path");
fromAngle = i * 360 / part;
toAngle = (i + 1) * 360 / part;
fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180));
fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180));
toCoordX = cx + (r * Math.cos(toAngle * Math.PI / 180));
toCoordY = cy + (r * Math.sin(toAngle * Math.PI / 180));
d = 'M' + cx + ',' + cy + ' L' + fromCoordX + ',' + fromCoordY + ' A' + r + ',' + r + ' 0 0,1 ' + toCoordX + ',' + toCoordY + 'z';
path.setAttributeNS(null, "d", d);
document.getElementById('pie').appendChild(path);
}
}
createSector(55, 55, 50, 12);
svg {
height: 220px;
width: 220px;
}
path {
fill: #5F5E5F;
stroke: #BFBFBF;
stroke-width:2;
}
<svg viewBox="0 0 110 110" id="pie"></svg>