Advertisement
  1. Web Design
  2. CSS

Как создать полукруглую диаграмму с помощью CSS

by
Read Time:7 minsLanguages:

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

Несмотря на то, что использование HTML 5 Canvas и SVG может оказаться более элегантным решением, в этом уроке мы узнаем, как создать полукруглую диаграмму на чистом CSS.

Чтобы понять, что мы собираемся создать, взгляните на готовое демо на CodePen:

HTML разметка

Начнем с простой разметки; чистый неупорядоченный список с элементом span в каждом из элементов списка:

Добавляем стили списку

С готовой разметкой приступаем к приданию парочки простых стилей нашему списку:

Затем, каждому из элементов списка мы дадим по ::after и ::before псевдо-элементу, а затем дадим им стили:

Обратите внимание на стили для псевдо-элемента ::before. Это даст нам наш полукруг.

pseudo elementspseudo elementspseudo elements
Псевдо-элементы

Итак, вышеупомянутые правила дадут нам следующий результат:

Добавляем стили элементам списка

Давайте обсудим стили для элементов списка.

Позиционирование

Не забывая про позиционирование элементов списка, сделаем следующее:

  • Расположим их прямо под их родительским элементом и
  • дадим им соответствующие стили, чтобы создать обратный полукруг.

Далее следует упомянуть еще пару вещей:

  • Элементы списка имеют position:absolute, так мы можем выставить их z-index правильным образом.
  • Мы изменим изначальное значение transform-origin (например, transform-origin: 50% 50%) элементов списка. В особенности, установим transform-origin: 50% 0. В этом случае, когда мы начнем поворачивать предметы, их центральный верхний угол окажется точкой, вокруг которой будет происходить вращение.

Вот необходимые стили CSS:

Посмотрите, что мы сделали, на следующей визуализации:

элементы меню и span

Сейчас виден только зеленый элемент меню (z-index которого равен 4). Остальные находятся под ним.

Анимации

Прежде чем приступить к анимациям, давайте укажем желаемые процентные значения для каждого элемента (например: сколько каждый элементов займет места на полукруге). Ознакомьтесь со следующей таблицей:

Язык Проценты
CSS 12
HTML 32
PHP 34
Python 22

Затем, мы посчитаем, на сколько градусов нам нужно будет анимировать (повернуть) каждый из наших элементов. Чтобы узнать точное число для каждого элемента, умножим его процентное число на 180° (не 360° потому что у нас полукруг):

Язык Проценты
Градус
CSS 12 12/100 * 180 = 21.6
HTML 32
32/100 * 180 = 57.6
PHP 34 34/100 * 180 = 61.2
Python 22 22/100 * 180 = 39.6

Теперь мы готовы настраивать анимацию. Сначала, определяем стиль анимации, который будет одинаковым у всех элементов, добавляя несколько значений к .chart-skills li:

Затем задаем уникальные значения стиля анимации:

Заметьте, что мы добавляем задержку всем элементам, кроме первого. В этом случае создаем последовательные анимации. Например, когда кончается анимация первого элемента, начинается анимация второго, и т.д.

Вторым шагом зададим конкретно анимации:

Прежде, чем двигаться дальше, посмотрим, как работают анимации:

Первый элемент идет от transform: none к transform: rotate(21.6deg).

Второй от transform: rotate(21.6deg)(начинается с последней позиции первого элемента) к transform: rotate(79.2deg)(57.6deg + 21.6deg).

Третий от transform: rotate(79.2deg)(начинается с последней точки второго элемента) к transform: rotate(140.4deg)(61.2deg + 79.2deg).

Четвертый от transform: rotate(140.4deg)(начинается с последней позиции третьего элемента) к transform: rotate(180deg)(140.4deg + 39.6deg).

Прячьте!

Последнее, но не менее важное, это спрятать вторую половину диаграммы снизу, для этого добавим следующее:

overflow: hidden показывает нам, что видна только первая половина круга (та, что с ::before псевдо-элементом) Не стесняйтесь удалить это свойство, если вам интересно посмотреть на начальные позиции элементов списка.

transform-style: preserve-3d и backface-visibility: hidden предотвращают нежелательные дерганья анимаций в различных браузерах. Если проблема не решилась, попробуйте эти решения.

Почти готово! Осталось только задать стили названиям секций, чем мы займемся в следующем разделе.

Вот CodePen демо, показывающее нашу текущую диаграмму:

Задаем стили названиям секций

В этом разделе мы зададим стили названиям секций нашей диаграммы.

Позиционирование

В зависимости от их положения, делаем следующее:

  • Даем им position: absolute и используем top и left, чтобы задать желаемое положение.
  • Используем негативные значения, чтобы повернуть их. Конечно, значения не с потолка. На деле, они взяты из последнего куска родительского элемента. Например, последний момент второго элемента списка это transform: rotate(79.2deg), а значит мы используем transform: rotate(-79.2deg).

Ниже представлен соответсвующий код CSS:

Анимации

Теперь, когда мы разместили наши названия, самое время задать им анимации. Стоит упомянуть две вещи:

  • По умолчанию, все названия спрятаны и появляются только когда начинается анимация их родительского элемента.
  • Потому мы также, как и в случае с их родительскими элементами, используем animation-delay, чтобы сделать последовательную анимацию. Также добавляем backface-visibility: hidden, чтобы убедиться в отсутствии дерганий в различных браузерах.

CSS код анимаций представлен ниже:

Вот наш конечный результат:

Поддержка браузеров и возможные проблемы

В целом, демо отлично работает во всех браузерах. Хочу лишь обсудить две небольшие проблемы, связанные с border-radius.

Во-первых, если бы мы задали разные цвета нашим элементам, диаграмма могла бы выглядеть так:

Обратите внимание на верхний и нижний угол третьего элемента. Там две красные линии, которые идут от border-color четвертого элемента. Мы видим эти лини потому что четвертый элемент имеет более темный цвет границы, чем третий элемент. Хоть это и мелкая проблема, хорошо о ней знать.

Во-вторых, в Safari диаграмма появляется следующим образом:

Обратите внимание на эти небольшие промежутки между вторым и третьим элементом. Если вы знаете, как с этим справиться, расскажите нам об этом в комментариях!

Заключение

В этом уроке мы создали полукруглую диаграмму на чистом CSS. Вновь, как упоминалось во вступлении, есть более мощные решения (HTML5 Canvas и SVG) для создания вещей подобного рода. Однако, если вам нужно что-то простое и легкое, при этом с вызовом, тогда CSS идеально подойдет!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.