Страницы

Поиск по вопросам

пятница, 19 октября 2018 г.

Угловой градиент как?


как подобное правильно реализовать? Делал через картинки (но это не правильно), сама суть, чтобы поле для заливки градиента было динамичным, то есть - захотел выставил 93%, захотел 2% и тд.


Ответ

Угловой градиент можно создать с помощью conic-gradient
.pie { background: conic-gradient(aqua, lime); border-radius: 50% }
Примеры других градиентов - здесь. И там же - инструкция по подключению на сайт. Дело в том, что conic-gradient на данный момент лишь принят W3C как часть CSS4 Images (ссылка). Браузеры его пока не поддерживают. Но использовать его можно уже сейчас с помощью полифила
С динамичным формированием диаграммы - сложнее. В CSS популярное решение - использовать для диаграммы две заготовленные половинки окружности:

И, если нужно больше 50% заполненности - используются обе половинки. Если меньше 50% - одна. Решается это установкой дополнительного класса (например, .big, для .pie).
Скорее всего, нужен будет небольшой js-скрипт, который будет смотреть, сколько %-заполненности установлено у .pie, и будет ставить, или не ставить, дополнительный класс.

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

Отправить комментарий