Как сделать декорацию заголовка подстраиваемую под ширину текста в CSS ?

Question

[firerap]

Как сверстать такой заголовок? Текст по середине, а по сторонам до текста повторяется изображение.

Answer 1

[Юрий Лобанов]

Вариантов тут куча, и думаю предложат их другие. Я же хочу предложить такой способ, о котором в другом вопросе напомнил @RadiationX
codepen.io/iiil/pen/mtcuD
Что касается других вариантов - можно использовать before/after, можно просто тремя блоками верстать.

Если фон однородный - вот такой вариант codepen.io/iiil/pen/yczbe
Скобки-то нужны или нет?

Третий вариант, с использованием border-image. Поддержка не очень по ie (от 11), вместо картинки пользователь увидит просто зеленую рамку, то есть Вы используйте свою картинку, а пользователям старых ie сделайте адекватную замену обычным бордером.
codepen.io/iiil/pen/mtcuD

Comments

[firerap]

А не знаете как сделать всё же картинкой линию? Проблема в том, что у этой границы есть полупрозрачное свечение.
Если делать через Before/after то непонятно каким образом задать им нужную ширину, что бы фон не дублировался дальше текста.

[Юрий Лобанов]

@firerap изменил ответ, посмотрите.

[firerap]

@iiil дело именно в том что фон неоднородный. А скобки нужны, в оригинале там декоративный элемент, но я так понимаю при любом решении это не проблема.

[Юрий Лобанов]

@firerap посмотрите новый вариант, обновил вопрос. Скобки Вам тут предлагали - их сделать действительно без проблем.

[Юрий Лобанов]

@firerap обновил ответ )

Answer 2

[Евгений Низамиев]

яб сделал вообще вот так
cssdeck.com/labs/zftbf1tq

Comments

[Юрий Лобанов]

я так понял, что скобки просто так добавлены )

Answer 3

[Mangor]

Смотрите, можно и без изображения.

Answer 4

[Anton Yatsenyuk]

Можно и с градиентами.

Answer 5

[Андрей Морозов]

Моё решение