1

Как сверстать такой блок? Блок идёт вверх, заполняется по мере получения опыта и пролистывается вверх. Линия вверх

5
  • данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему) Commented 12 февр. 2021 в 7:50
  • но вы его откуда то соскриншотили? в браузере F12 нажмите и посмотрите как он устроен
    – Zhihar
    Commented 12 февр. 2021 в 7:58
  • @zhihar Я его скриншотил из макета, откуда его нужно сверстать
    – zdobich
    Commented 12 февр. 2021 в 8:00
  • @aleksandrbarakin Если есть варианты текста, как сформировать вопрос без картинки, чтобы люди поняли что я имею ввиду - открыт для ваших предложений.
    – zdobich
    Commented 12 февр. 2021 в 8:01
  • попробуйте описать словами то, чего вы хотите, и что именно у вас не получилось. тогда вопрос действительно может быть полезен и другим — они его смогут найти в поисковиках. Commented 12 февр. 2021 в 8:06

1 ответ 1

3

сделал код который требует минимум тегов, чтобы не захламлять

настройку цветов и шрифтов вы уж сами

.progress {
  display:        flex;
  flex-direction: column;
  justify-content:  space-between;
  
  width:          36px;
  height:         calc(72px * 5);
  
  font-size:      0;
  
  margin-top:     50px;
}

.progress  div {
  position:       relative;
  
  width:          36px;
  height:         36px;
  line-height:    36px;
  
  border-radius:  calc(18px + 2px);
  border:         3px solid #d0d0d0;
  
  text-align:     center;
  
  font-size:      24px;
  font-weight:    700;
  font-family:    Calibri;
  
  color:          #d0d0d0;
}

.progress  div:before {
  position:       absolute;
  left:           16px;
  top:            -23px;
  
  content:        '';
  width:          3px;
  height:         18px;
  
  background:     #d0d0d0;  
}

.progress  div:after {
  position:       absolute;
  left:           16px;
  bottom:         -23px;
  
  content:        '';
  width:          3px;
  height:         18px;
  
  background:     #d0d0d0;  
}

.progress  .current, .progress .current ~ div {
  border:         3px solid lime;
  color:          lime;  
}

.progress  .current:after, .progress .current ~ div:after, .progress .current ~ div:before {
  background:     lime;  
}
<div class = 'progress'>
  <div>5</div>
  <div>4</div>
  <div class = 'current'>3</div>
  <div>2</div>
  <div>1</div>
</div>

P.S.

упс, пока код писал думал, что между линиями и кругами отступ должен быть, ну это исправить через корректировку top, bottom на 2 пикселя можно

1
  • @Sevastopol' ну если нужна динамика то просто последовательно меняется класс current для элементов, а если нужно плавное закрашивание даже между кругами, то это уже маскирование - тут сложнее :(, но судя по цифрам 1,2,3 - это больше на этапы похоже, т.е. промежуточного закрашивания не требуется
    – Zhihar
    Commented 12 февр. 2021 в 8:17

Ваш ответ

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

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