|
|
| Line 1: |
Line 1: |
| .ring-chart28 {
| |
| list-style: none;
| |
| position: relative;
| |
| width: 200px; /* Ширина диаграммы */
| |
| height: 200px; /* Высота диаграммы */
| |
| 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%);
| |
| }
| |
|
| |
|
|
| |
|
| Line 135: |
Line 90: |
|
| |
|
| /* Новый слой с изображением */ | | /* Новый слой с изображением */ |
| .ring-chart27 ul li.overlay { | | .ring-chart27 .overlay { |
| position: absolute; | | position: absolute; |
| top: 0; | | top: 0; |
| Line 141: |
Line 96: |
| width: 100%; | | width: 100%; |
| height: 100%; | | height: 100%; |
| z-index: 4; /* Поверх всех сегментов */ | | z-index: 3; /* Поверх всех сегментов, но под изображением */ |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| } | | } |
|
| |
|
| .ring-chart27 ul li.overlay img { | | .ring-chart27 .overlay img { |
| display: block;
| | width: 70%; /* Настройте размер изображения */ |
| width: 100%; | | height: auto; |
| height: 100%; | |
| object-fit: contain; | | object-fit: contain; |
| pointer-events: none; | | pointer-events: none; |
| } | | } |
| | |
|
| |
|
|
| |
|