0

Всем привет. Как сделать вот такой цилиндр? Пробовал делать border-radius но никак. Может есть библиотека или готовые решения и вообще как правильно их делают? Картинка не подойдёт ибо они должны расти от изменении суммы(т.е динамически)

введите сюда описание изображения

1
  • А её получится растянуть? Типо при увеличение цены. Мне кажется она в качестве потеряет 7 мая 2019 в 16:26

1 ответ 1

5

А впрочем, это делается довольно легко и на CSS. Закругляем края div с помощью border-radius, с помощью первого вложенного элемента :before делаем верхушку другого цвета тоже с закруглением через border-radius, ну а дальше тень, цвета, размеры и двигания уже на свой вкус — тут уже ничего особенного.

/* Каркас для цилиндров любых цветов */
.chart-cylinder {
  width: 137px;
  border-radius: 50% / 23px;
  position: relative;
  overflow: hidden;
}

.chart-cylinder:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 46px;
  border-radius: 0 0 50% 50%;
}


/* Цвета отдельно */
.chart-cylinder-green-shadow {
  background-color: #3ba67f;
  /* Тень писал наугад, может быть не совсем правильной */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.chart-cylinder-green-shadow:before {
  background-color: #4bd1a0;
}

.chart-cylinder-white-shadow {
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.chart-cylinder-white-shadow:before {
  background-color: #e8e8e8;
}
<div
  class="chart-cylinder chart-cylinder-green-shadow"
  style="height: 100px; z-index: 1;"></div>
<div
  class="chart-cylinder chart-cylinder-white-shadow"
  style="height: 69px; margin-top: -35px;"></div>

2
  • 1
    Что такое border-radius: 50% / 23px;? Я еще не видел таких значений, как это работает?
    – Telion
    7 мая 2019 в 17:18
  • 1
    @Telion радиус закругления по горизонтали и по вертикали соответственно webref.ru/css/border-radius
    – andreymal
    7 мая 2019 в 17:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.