8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
. | .circle-chart-background { | ||
position: relative; /* Для позиционирования псевдоэлемента */ | |||
width: 200px; /* Ширина фона */ | |||
height: 200px; /* Высота фона */ | |||
border-radius: | border-radius: 50%; /* Делаем фон кругом */ | ||
overflow: hidden; /* Скрываем все, что выходит за пределы круга */ | |||
} | |||
.circle-chart-background::before { | |||
content: ''; /* Создаем пустой контент для псевдоэлемента */ | |||
position: absolute; /* Абсолютное позиционирование */ | |||
top: 0; /* Верхний край */ | |||
left: 0; /* Левый край */ | |||
width: 100%; /* Ширина псевдоэлемента */ | |||
height: 100%; /* Высота псевдоэлемента */ | |||
background: conic-gradient(orange 0% 20%, green 20% 100%); /* Круговая диаграмма */ | |||
border-radius: 50%; /* Делаем псевдоэлемент кругом */ | |||
z-index: 0; /* Помещаем на задний план */ | |||
} | |||
.imagemap-content { | |||
position: relative; /* Для позиционирования содержимого */ | |||
z-index: 1; /* Помещаем содержимое на передний план */ | |||
} | } | ||