Как сделать такой элемент как в макете

138

03 декабря 2020, 11:20

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

Answer 1

А впрочем, это делается довольно легко и на 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>