Как правильно верстать такой блок?

Изображение

Как правильно сделать линию снизу блока? Остальные элементы отверстать могу, а зелёную линию снизу сделать похожей нет..


Ответы (1 шт):

Автор решения: meine

.box {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border-bottom: 5px solid green;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
}
<div class="box">
  <p>1</p>
</div>

→ Ссылка