Диаграмма с одним значением
<style> .pie { width: 12em; /* диаметр */ aspect-ratio: 1; /* ширина = высота */ border-radius: 50%; /* закругление углов */ background: conic-gradient(darkturquoise var(--pie-p, 0%), whitesmoke 0); /* конический градиент с цветами darkturquoise и whitesmoke */ } </style> <!-- установить свое значение для переменной --pie-p (p в честь percent) --> <div class="pie" style="--pie-p:65%;"></div>
<style> .pie { width: 12em; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(darkturquoise var(--pie-p, 0%), whitesmoke 0); } .pie.mask { --pie-b: 1em; /* толщина линии по умолчанию */ mask: radial-gradient(farthest-side,#0000 calc(99% - var(--pie-b)),#000 calc(100% - var(--pie-b))); } </style> <!-- при желании, установить свое значение для переменной --pie-b --> <div class="pie mask" style="--pie-p:65%; --pie-b:1.5em;"></div>
65%
<style> .pie { --pie-b: 15px; position: relative; /* текст по центру */ display: inline-grid; place-content: center; width: 150px; aspect-ratio: 1; font: bold 2em sans-serif; /* размер (2em) и шрифт текста */ } .pie::before { content: ""; /* растянуть на всю площадь родителя */ position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: conic-gradient(darkturquoise var(--pie-p, 0%), whitesmoke 0); mask: radial-gradient(farthest-side,#0000 calc(99% - var(--pie-b)),#000 calc(100% - var(--pie-b))); } </style> <!-- при желании, установить свое значение для переменной --pie-b --> <div class="pie" style="--pie-p:65%;">65%</div>
Пример с закругленными краями [freecodecamp.org].
Диаграмма с пятью значениями
<style> .pie { --pie-p_1: var(--pie-p1, 0%); /* если переменная --pie-p1 не задана, то использовать 0% */ --pie-p_2: calc(var(--pie-p_1) + var(--pie-p2, 0%)); --pie-p_3: calc(var(--pie-p_2) + var(--pie-p3, 0%)); --pie-p_4: calc(var(--pie-p_3) + var(--pie-p4, 0%)); --pie-c: 170; /* цвет */ width: 12em; aspect-ratio: 1; border-radius: 50%; background: conic-gradient( hsl(var(--pie-c), 80%, 80%) var(--pie-p_1), hsl(var(--pie-c), 70%, 70%) 0 var(--pie-p_2), hsl(var(--pie-c), 60%, 60%) 0 var(--pie-p_3), hsl(var(--pie-c), 50%, 50%) 0 var(--pie-p_4), hsl(var(--pie-c), 40%, 40%) 0 /* последнее значение занимает оставшееся пространство */ ); } </style> <div class="pie" style="--pie-p1:25%; --pie-p2:3%; --pie-p3:10%; --pie-p4:40%"></div>
<style> .pie { --pie-p_1: var(--pie-p1, 0%); --pie-p_2: calc(var(--pie-p_1) + var(--pie-p2, 0%)); --pie-p_3: calc(var(--pie-p_2) + var(--pie-p3, 0%)); --pie-p_4: calc(var(--pie-p_3) + var(--pie-p4, 0%)); --pie-c: 170; width: 12em; aspect-ratio: 1; border-radius: 50%; background: conic-gradient( hsl(var(--pie-c), 80%, 80%) var(--pie-p_1), hsl(var(--pie-c), 70%, 70%) 0 var(--pie-p_2), hsl(var(--pie-c), 60%, 60%) 0 var(--pie-p_3), hsl(var(--pie-c), 50%, 50%) 0 var(--pie-p_4), hsl(var(--pie-c), 40%, 40%) 0 ); } .pie.mask { --pie-b: 1em; mask: radial-gradient(farthest-side,#0000 calc(99% - var(--pie-b)),#000 calc(100% - var(--pie-b))); } </style> <div class="pie mask" style="--pie-p1:25%; --pie-p2:3%; --pie-p3:10%; --pie-p4:40%; --pie-b:40%;"></div>
Круговая диаграмма с легендой
Наводя мышкой на значения легенды, меняется цвет секторов.
Январь
Февраль
Март
Апрель
Май
<style> .pie { display: grid; grid-template-columns: 12em 10em; /* 12em — размер диаграммы, 10em — размер легенды */ gap: 0 3em; /* 3em - 2em (margin-left) = 1em — расстояние от диаграммы до легенды */ --pie-c_1: 170; /* неактивный цвет */ --pie-c_2: 60; /* активный цвет */ --pie-c1: var(--pie-c_1); --pie-c2: var(--pie-c_1); --pie-c3: var(--pie-c_1); --pie-c4: var(--pie-c_1); --pie-c5: var(--pie-c_1); overflow: auto; } .pie div:not(:last-of-type) { grid-column: 2 / 3; align-self: center; } .pie div:not(:last-of-type)::before { content: ""; width: 1.5em; height: 1.5em; display: inline-block; margin-left: -2em; /* 1.5em (width) + .5em (margin-right) = 2em */ margin-right: .5em; vertical-align: middle; } .pie div:nth-of-type(1):before { background: hsl(var(--pie-c1), 80%, 80%); } .pie div:nth-of-type(2):before { background: hsl(var(--pie-c2), 70%, 70%); } .pie div:nth-of-type(3):before { background: hsl(var(--pie-c3), 60%, 60%); } .pie div:nth-of-type(4):before { background: hsl(var(--pie-c4), 50%, 50%); } .pie div:nth-of-type(5):before { background: hsl(var(--pie-c5), 40%, 40%); } .pie div:last-of-type { grid-column: 1 / 2; grid-row: 1 / 6; } .pie div:last-of-type { --pie-p_1: var(--pie-p1, 0%); --pie-p_2: calc(var(--pie-p_1) + var(--pie-p2, 0%)); --pie-p_3: calc(var(--pie-p_2) + var(--pie-p3, 0%)); --pie-p_4: calc(var(--pie-p_3) + var(--pie-p4, 0%)); width: 12em; aspect-ratio: 1; border-radius: 50%; background: conic-gradient( hsl(var(--pie-c1), 80%, 80%) var(--pie-p_1), hsl(var(--pie-c2), 70%, 70%) 0 var(--pie-p_2), hsl(var(--pie-c3), 60%, 60%) 0 var(--pie-p_3), hsl(var(--pie-c4), 50%, 50%) 0 var(--pie-p_4), hsl(var(--pie-c5), 40%, 40%) 0 ); } .pie div:nth-of-type(1):hover, .pie div:nth-of-type(1):hover ~ div:last-of-type { --pie-c1: var(--pie-c_2); } .pie div:nth-of-type(2):hover, .pie div:nth-of-type(2):hover ~ div:last-of-type { --pie-c2: var(--pie-c_2); } .pie div:nth-of-type(3):hover, .pie div:nth-of-type(3):hover ~ div:last-of-type { --pie-c3: var(--pie-c_2); } .pie div:nth-of-type(4):hover, .pie div:nth-of-type(4):hover ~ div:last-of-type { --pie-c4: var(--pie-c_2); } .pie div:nth-of-type(5):hover, .pie div:nth-of-type(5):hover ~ div:last-of-type { --pie-c5: var(--pie-c_2); } </style> <div class="pie"> <div>Январь</div> <div>Февраль</div> <div>Март</div> <div>Апрель</div> <div>Май</div> <div style="--pie-p1:25%; --pie-p2:3%; --pie-p3:10%; --pie-p4:40%;"></div> </div>