Is it possible to do it with css or svg?

Question

css

Is it possible to make a 4-delimited horizontal line using CSS or SVG, dividing this line into 5 equal parts?

It is necessary to make exactly one line of 1 block, divided into 5 parts, and not one line of 5 blocks, because. the width of this line is loaded from the JS script:

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

graphic[i].innerHTML- has values ​​from 1-5 (score), including decimals.
But if there is a way to implement it in JS so that the integer value of the rating corresponds to the number of blocks, and if the rating has a decimal form, for example 4.7, then 4 blocks would be displayed in a row in full width (100%) , and the last, 5th block, would accordingly be equal to 70%, then I will only be glad if you tell me.

Answer 1

You can wrap the block in the parent, and add decorative stripes to it through pseudo-elements.
https://codepen.io/just_freelance/pen/bGdMeWg

Answer 2

Well, if the current is one block, you can hang this line on the background (as a picture) and specify the width of the background.
Well, the width of the parent is equal to the width of the background, and the block itself is already a percentage.

Answer 3

Look towards the gradient

Answer 4

UL , in it one after another LI. In CSS, using the :first-child (last) pseudo classes rounded the corners of the first and last LI.
You can also shift the position of the inner background to the left depending on%