8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
. | .pia-chart27 { | ||
list-style-type: none; | |||
position: relative; | position: relative; | ||
width: 200px; | width: 200px; /* Ширина диаграммы */ | ||
height: 200px; | height: 200px; /* Высота диаграммы */ | ||
border-radius: 50%; | border-radius: 50%; | ||
overflow: hidden; | |||
} | } | ||
. | .sector { | ||
position: absolute; | position: absolute; | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
clip-path: polygon(50% 50%, 100% 0, 100% 100%); | |||
clip-path: polygon(50% 50%, 100% | transform-origin: 50% 50%; | ||
transform-origin: | |||
} | } | ||
. | .sector1 { background-color: #ff6384; transform: rotate(0deg) translate(50%); } | ||
.sector2 { background-color: #36a2eb; transform: rotate(72deg) translate(50%); } | |||
.sector3 { background-color: #cc65fe; transform: rotate(144deg) translate(50%); } | |||
.sector4 { background-color: #ffce56; transform: rotate(216deg) translate(50%); } | |||
.sector5 { background-color: #4bc0c0; transform: rotate(288deg) translate(50%); } | |||
} | |||