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

e6db3f276d5e4734b84f8757c97b83b4.png
Как сверстать такой заголовок? Текст по середине, а по сторонам до текста повторяется изображение.
  • Вопрос задан
  • 3116 просмотров
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Вариантов тут куча, и думаю предложат их другие. Я же хочу предложить такой способ, о котором в другом вопросе напомнил @RadiationX
codepen.io/iiil/pen/mtcuD
Что касается других вариантов - можно использовать before/after, можно просто тремя блоками верстать.

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

Третий вариант, с использованием border-image. Поддержка не очень по ie (от 11), вместо картинки пользователь увидит просто зеленую рамку, то есть Вы используйте свою картинку, а пользователям старых ie сделайте адекватную замену обычным бордером.
codepen.io/iiil/pen/mtcuD
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
RadiationX
@RadiationX
Front-End разработчик
яб сделал вообще вот так
cssdeck.com/labs/zftbf1tq
Ответ написан
Mangor
@Mangor
Смотрите, можно и без изображения.
Ответ написан
Комментировать
@spamforhope
Front-end developer
Можно и с градиентами.
Ответ написан
Комментировать
LuckyTrue
@LuckyTrue
JS-разработчик
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы