Как сделать такую рамку?

Question

[aftar]

Здравствуйте! Подскажите как можно сделать такую рамку. Сложность вызывает то, что на заднем плане bg.
Понимаю что через before и after. Но не понимаю как оцентрировать для текста после переноса и растянуть на всю ширину.
Задавать фиксированную ширину не вариант, не подойдет для адаптива.

Answer 1

[maks_pain_00]

Через fieldset и в теге legend прописать заголовок
Затем через стили css сделать цвет рамки, установить ширину и высоту блока.
оцентровать текст через text-align.
Это то что я могу сказать

Answer 2

[Рома Зварич]

Flexbox + абсолютное позиционирование + псевдоэлементы + выборочное скругление углов для верхней грани блока

Результат:
https://codepen.io/hisbvdis/pen/gOYZLNM

Comments

[Рома Зварич]

aftar , такой вариант Вам подходит?

[aftar]

Рома Зварич, спасибо, но хотел обойтись без лишних дивов

[Рома Зварич]

aftar, в смысле? В вёрстке только один div.
Предполагаю, Вы имеете в виду, без лишних элементов?
Если Вы считаете, что код можно улучшить, пожалуйста.
Я Вам набросал пример решения Вашей проблемы.
Он разве не решает Вашу проблему?

Или Вы ждёте кода с Pixel Perfect вёрсткой по Вашему макету?

[aftar]

Рома Зварич, да, опечатался. Имел ввиду без лишнего span line-left и line right.
Ваше решение конечно подходит.

Answer 3

[RAX7]

Comments

[aftar]

Спасибо