Как сделать круговую диаграмму на чистом CSS

В этом посте мы рассмотрим как создать круговую диаграмму на чистом CSS, без использования JavaScript и сторонних библиотек.

Для начала мы создадим разметку для нашей диаграммы:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="chart"></div>
</body>

</html>

Дальше мы пропишем для нее стили:

style.css

.chart {
    background: conic-gradient(red 0 15%, blue 15% 50%, green 50% 100%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
}

width: 400px;
height: 400px;

Задаем размеры 400px на 400px получаем квадрат.

После скругляем углы border-radius: 50%;

С помощью background: conic-gradient(red 0 15%, blue 15% 50%, green 50% 100%); задаем цвета и процентные соотношения для каждого цвета. Основной момент в том, чтобы каждый последующий цвет начинался на границе где заканчивается предыдущий. Тогда получиться строгая круговая диаграмма.

Видео с пошаговой инструкцией

Комментарии:

Комментарии для сайта Cackle