8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
.pie-chart27 { | |||
position: relative; | |||
width: 200px; | |||
height: 200px; | |||
border-radius: 50%; | |||
clip-path: circle(); | |||
} | |||
.pie-chart27 ul { | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
clip-path: circle(); | |||
} | |||
.pie-chart27 li { | |||
--rotate: calc(var(--offset) * 3.6deg); | |||
--slice: calc(var(--value) * 3.6deg); | |||
position: absolute; | |||
width: 100%; | |||
height: 100%; | |||
background-color: var(--bg); | |||
clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%); | |||
transform: rotate(var(--rotate)); | |||
transform-origin: center; | |||
} | |||
.pie-chart27 li::before { | |||
content: ""; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
width: 50%; | |||
height: 50%; | |||
background-color: white; | |||
border-radius: 50%; | |||
transform: translate(-50%, -50%); | |||
} | |||
.ring-chart27 { | .ring-chart27 { | ||
position: relative; | position: relative; | ||