8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
. | .ring-chart28 { | ||
list-style | list-style: none; | ||
position: relative; | |||
width: 200px; /* Ширина диаграммы */ | width: 200px; /* Ширина диаграммы */ | ||
height: 200px; /* Высота диаграммы */ | |||
overflow: hidden; | border-radius: 50%; | ||
overflow: hidden; | |||
} | } | ||
. | .segment { | ||
position: absolute; | |||
width: 50%; | |||
height: 100%; | |||
clip: rect(0px, 200px, 200px, 100px); | |||
} | } | ||
. | .segment1 { | ||
background-color: #FF5733; /* Цвет сегмента 1 */ | |||
transform: rotate(0deg); | |||
} | } | ||
.segment2 { | |||
background-color: #33FF57; /* Цвет сегмента 2 */ | |||
transform: rotate(108deg); /* 30% + 20% */ | |||
} | |||
.segment3 { | |||
background-color: #3357FF; /* Цвет сегмента 3 */ | |||
transform: rotate(180deg); /* 30% + 20% + 25% */ | |||
} | |||
.segment4 { | |||
background-color: #FF33A8; /* Цвет сегмента 4 */ | |||
transform: rotate(252deg); /* 30% + 20% + 25% + 25% */ | |||
} | |||
.segment::after { | |||
content: ""; | |||
position: absolute; | |||
left: 100%; | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 50%; | |||
background: white; /* Цвет внутренней части кольца */ | |||
transform: translateX(-100%); | |||
} | |||