Как на css реализовать вертикальную диаграмму как на рисунке?

Question

[CrewCut]

Есть калькулятор расчета стоимости, в итоге получается сумма и два столбика. Сейчас они сделаны картинкой с изменяющимся на js height параметром, но картинки тянется, всё некрасиво и т.п.

Как на css реализовать такие столбики - с тенью, закруглением и объемом?

Answer 1

[tigra]

https://jsfiddle.net/v808x2v0/2/
как вариант, только с цветами и градиентом поиграться надо)

Comments

[CrewCut]

Спасибо. А как вы такую штуку сделали, не вручную ведь писали?

[tigra]

CrewCut: что именно? градиент?

[CrewCut]

tigra: да, именно

[tigra]

CrewCut: генераторов куча, я этим пользуюсь www.colorzilla.com/gradient-editor

[CrewCut]

tigra: точно, спасибо. тут проблема - при изменении высоты градиенты не сходятся joxi.ru/DmBNwwyuN1LWam

[tigra]

CrewCut: сделать можно, только извращаться надо. я бы на вашем месте, просто сделал градиент вертикальным, ничего уезжать не будет и объём сохранится https://jsfiddle.net/tigroid3/v808x2v0/3/

[CrewCut]

tigra: так в макете, увы. попробую, спасибо