Как правильно вставлять вот такую фигуру под Заголовком?

Question

[stetxems]

Вот есть Заголовок, и к нему нижняя линия(фигура), как ее правильно сделать, что б при изменения текста ничего не рушилось.

изображение

Вот в svg формате


Вообще никто не знает?

Comments

[Ankhena]

что б при изменения текста ничего не рушилось.

Вообще никто не знает?

Лично я не знаю, что там может порушиться.
Может уточните вопрос?

[stetxems]

Ankhena, Есть заголовок и эта фигура, и например, когда я изменяю размер шрифта или размер текста, что б фигура не съезжала .Обновил кодепен, добавил как я это сделал, но фото не могу загрузить..по этому криво, как бы вы это сделали? Добавил фигуры, может они вам нужны будут

[Ankhena]

stetxems, множественным фоном.
Ширина правого и левого - известна.
Среднего - через calc.

[stetxems]

Ankhena, background-image: url(../images/icons/right-line.svg),
url(../images/icons/left-line.svg);
background-repeat: no-repeat;
background-position: bottom right, bottom left;
Вот так сделал,
А середину не понял как с calc сделать

[Ankhena]

stetxems,

background-size: calc(100% - ширина-левой - ширина-правой) 2px

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