8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
.pie-chart4 { | |||
width: 200px; | |||
height: 200px; | |||
border-radius: 50%; | |||
position: relative; | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center center / cover; | |||
} | |||
.pie-chart4 li { | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 50%; | |||
position: absolute; | |||
clip: rect(0, 200px, 200px, 100px); | |||
} | |||
.pie-chart4 li:before { | |||
content: ""; | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 50%; | |||
clip: rect(0, 100px, 200px, 0); | |||
background-color: var(--color); | |||
transform: rotate(calc(var(--percentage) * 3.6deg)); | |||
transform-origin: 50% 50%; | |||
} | |||
.pie-chart4 li:nth-child(2) { | |||
transform: rotate(calc(25 * 3.6deg)); | |||
} | |||
.pie-chart4 li:nth-child(3) { | |||
transform: rotate(calc(75 * 3.6deg)); | |||
} | |||
.pie-chart4 li:nth-child(4) { | |||
transform: rotate(calc(150 * 3.6deg)); | |||
} | |||
/* Основной стиль для <li> */ | /* Основной стиль для <li> */ | ||
.tooltip23-container { | .tooltip23-container { | ||