Как сверстать такой блок? Блок идёт вверх, заполняется по мере получения опыта и пролистывается вверх.
-
данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему)– aleksandr barakinCommented 12 февр. 2021 в 7:50
-
но вы его откуда то соскриншотили? в браузере F12 нажмите и посмотрите как он устроен– ZhiharCommented 12 февр. 2021 в 7:58
-
@zhihar Я его скриншотил из макета, откуда его нужно сверстать– zdobichCommented 12 февр. 2021 в 8:00
-
@aleksandrbarakin Если есть варианты текста, как сформировать вопрос без картинки, чтобы люди поняли что я имею ввиду - открыт для ваших предложений.– zdobichCommented 12 февр. 2021 в 8:01
-
попробуйте описать словами то, чего вы хотите, и что именно у вас не получилось. тогда вопрос действительно может быть полезен и другим — они его смогут найти в поисковиках.– aleksandr barakinCommented 12 февр. 2021 в 8:06
Добавить комментарий
|
1 ответ
сделал код который требует минимум тегов, чтобы не захламлять
настройку цветов и шрифтов вы уж сами
.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 пикселя можно
-
@Sevastopol' ну если нужна динамика то просто последовательно меняется класс
current
для элементов, а если нужно плавное закрашивание даже между кругами, то это уже маскирование - тут сложнее :(, но судя по цифрам 1,2,3 - это больше на этапы похоже, т.е. промежуточного закрашивания не требуется– ZhiharCommented 12 февр. 2021 в 8:17