Как сделать border динамическим по ширине на десктопе и по высоте на смартфоне?

Question

[Влад]

Дизайнер дал мне макет, в нём есть такой блок:



Вёрстка естественно будет адаптивной и в последствии будет сажаться на Wordpress.

Я не понимаю как сделать border динамическим.
Я просто задал ему фиксированную ширину, но если заказчик поменяет текст, то вёрстка поедет.
Не хотелось бы блокам `workplan__step` задавать статическую ширину, чтобы контент в них не расползался.
У меня пока получается вот такая кривая вёрстка: https://codepen.io/vlad-tarasoffka/pen/NWJXaeL

И да. Нужно сделать с пристрелом на смартфон, где все эти блоки перестроятся по флексу вертикально и border тоже трансформируется вертикально типа:
o Дефектовка
|
|
o Ремонт
|
|
o Испытание на стенде
|
|
o Передача заказа

Никогда такие блоки ещё не встречались. Подскажите как правильно решается такая задача?

Answer 1

[Виталий Першин]

Comments

[Влад]

Спасибо, если бы ещё пунктиры чётко примыкали друг к другу, было бы вообще зашибись.
Я попробовал поиграться с background-position. Ничего не получилось.
Не знаю, можно ли как-то этого добиться.

[Виталий Першин]

Влад, Поправил, теперь не примыкают

[Влад]

Виталий Першин, точняк! только свойство с такими значениями нужно в медиа-запрос помещать, а на мобайл-ферст нужно background-position: bottom 0;

Ещё вопрос по svg. Он какой-то там весь заэкранированный для css, не могу понять как цвет поменять.. и что означают в нём проценты?

[Виталий Першин]

Влад,
width='4' height='10' style='fill:orange;' rx='3' ry='3'
ширина, высота, цвет, закругление

Проценты это спец символы вместо <svg></svg>