8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
.pie-chart { | |||
width: 200px; | width: 200px; | ||
height: 200px; | height: 200px; | ||
| Line 10: | Line 10: | ||
position: relative; | position: relative; | ||
list-style-type: none; | list-style-type: none; | ||
margin: 0; | |||
padding: 0; | |||
} | } | ||
| Line 18: | Line 20: | ||
border-radius: 50%; | border-radius: 50%; | ||
clip-path: polygon(50% 50%, 100% 0, 100% 100%); | clip-path: polygon(50% 50%, 100% 0, 100% 100%); | ||
} | |||
.pie-chart li a { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 50%; | |||
text-indent: -9999px; /* Скрываем текст */ | |||
} | } | ||
| Line 25: | Line 35: | ||
.pie-chart .segment-1 { | .pie-chart .segment-1 { | ||
transform: rotate(0deg); | transform: rotate(0deg); | ||
} | } | ||
.pie-chart .segment-2 { | .pie-chart .segment-2 { | ||
transform: rotate(180deg); | transform: rotate(180deg); | ||
} | } | ||
.pie-chart .segment-3 { | .pie-chart .segment-3 { | ||
transform: rotate(324deg); | transform: rotate(324deg); | ||
} | } | ||