Как сделать границу между двома блоками?

Question

[joker33]

Как сделать границу между двомя блоками 'Done' и 'InProgress'?
( блок адаптивный, количество стейджей может меняться от 1 до 15)
( без )


Пока получилось только так, а дальше не знаю ....


https://codepen.io/bogdan-dovgoruk/pen/JaYeVV

Comments

[Hyubert]

Лучше виложите код на jsfiddle или codepen.

[joker33]

Hyubert, ок - сделаем

[joker33]

Hyubert, https://codepen.io/bogdan-dovgoruk/pen/JaYeVV

Answer 1

[Ankhena]

https://jsfiddle.net/49dLtjxp/

Comments

[joker33]

Да вот совсем не то ))
Это обычний прогресбар, а мне нужно как на рисунке..... количество уровней может быть разное

[Ankhena]

joker33, не вижу разницы между обычным прогрессбаром и тем что у вас на рисунке.
Объясните в чем сложность?
Процент посчитать?

[Ankhena]

joker33, Посмотрите еще как тут сделано, если проблема выставлять галочки ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
Но и галочки выставляются CSS'ом, JS управляет их количеством и/или % расположения.

[joker33]

Ankhena, граница между стейджами должна быть там где находиться название уровня который окончен. Уровней может быть 5 или 7 или 20. Ширина блока адаптивная

[joker33]

Ankhena, это немного не то, но спасибо ))
Я там обновил вопрос - и дал ссылку на codepen

[Ankhena]

joker33, Ох наворотили вы кода.

Уберите

.stages-line__stage.in_progress .stage_line {
    /* background: #5EA72B; */
}

И у последнего заполненного для ::after задавайте ширину 50% и right вместо left
Для самого последнего заполненного, чтобы шакала вся оказалась светлой, снова верните 100%

[joker33]

Ankhena, Вооот! Вот тут и вопрос как мне узнать где последний елемент со статусом 'done'? ))
Я могу ошибаться но я не смог найти способ на CSS найти последний елемент по класу ....

Та строка лишняя - я знаю, спасибо!

[Ankhena]

joker33, таки не делайте это на CSS ;)

На CSS только дурь в голову приходит, типа .done + .in_progress и этой конструкции задавать ::before с left 100% и 50% шириной которое перекроет половинку покрашенного в предыдущем шаге.

На JS это делается в 1 понятную строчку добавлением еще одного класса.

[Ankhena]

joker33, ну либо вместе с добавлением класса .done менять div на span и использовать last-of-type.
Но это ...

Я либо за js либо другой способ расчета и соответственно разметки.

[joker33]

Ankhena, но самый правильный будет на JS, правильно?

[Ankhena]

joker33, самый простой для поддержки и восприятия другими людьми. Тем более, что все равно не чистый CSS.

[joker33]

Ankhena, я понял! Спасибо!