Возможно ли сделать по средствами css или svg?

Question

[Алексей Орлов]

Возможно ли сделать по средствами CSS или SVG горизонтальную линию с 4 разделителями , делящие эту линию на 5 равных частей?

Необходимо сделать именно одну линию из 1 блока, разделенную на 5 частей, а не одну линию из 5 блоков, т.к. ширина данной линии подгружается из JS скрипта:

graphic[i].style.width = graphic[i].innerHTML * 20 + '%';

graphic[i].innerHTML - имеет значения от 1-5 (оценка), включая десятичные.
Но если есть способ реализовать на JS , чтобы целое значение оценки соответствовало количеству блоков, а если оценка имеет десятичный вид, например 4.7, то выводилось бы 4 блока в ряд в полную ширину (100%) , а последний, 5 блок, соответственно был бы равен 70%, то буду только рад, если подскажете.

Answer 1

[Andrey K.]

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

https://codepen.io/just_freelance/pen/bGdMeWg

Answer 2

[devictor]

Ну если ток один блок, можно эту линию ему на фон повесить (картинкой) и ширину фону указать.
Ну и ширина родителя равна ширине фона, а сам блок уже в процентах.

Answer 3

[Олег]

Смотри в сторону градиента

Answer 4

[Ressiver]

UL , в нем друг за другом LI. В CSS, используя псевдо классы :first-child (last) скруглил углы первого и последнего LI.

Ещё можно позицию внутреннего фона сдвигать влево в зависимости от %