alex-1917
@alex-1917
Если ответ помог, отметь решением

Как сверстать такую объемную диаграмму?

Давно не задавал вопросов)))
Кто и как бы сверстал такую объемную диаграмму? Естессно, проценты могут меняться...
Это не клиенту и не для проекта, просто нашел прикольную картинку и подумал, а неплохо бы её заверстать, где-нибудь точно пригодилось бы в будущем.
А может и не пригодится...
Но все равно интересно...
5b9d2b642c9c9609277146.png
  • Вопрос задан
  • 487 просмотров
Решения вопроса 3
Ну если дело в 3d кубах, то вот, красивое решение.

Ответ написан
Комментировать
dollar
@dollar
Делай добро и бросай его в воду.
Мне кажется, что canvas идеально подходит в качестве простого решения (в плане реализации).

Хотя можно извратнуться. Полупрозрачные PNG разных цветов с абсолютным позиционированием. Отдельно "крышка", и отдельно "шаг в 5%", который дублируется.
Ответ написан
profesor08
@profesor08
Ну, картинка рисованная, причем не соблюдена прозрачность с учетом градиентов в некоторых местах. Чисто на CSS не выйдет, будут торчать ненужные углы, так как все стороны прозрачные.

На SVG возможно, ~3 path на кубик, и как-то залить их градиентом более менее похоже. Оперировать высотой будет проблематично, надо будет заново генерировать d для path.

Ну, а на canvas будет проще всего, там только сделать фигуру и вытянуть ее, задать цвет и поместить источники света для подсветки, и все.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы