Как сделать такой многосоставной фон?

Question

[medbrat13]

Нужно сделать такое:



Если есть библиотеки для такого, то вообще класс.
Если нет, и придется писать все вручную, то вот принцип работы:

фон состоит из нескольких частей - шапки, подвала и однопиксельной линии, которая по repeat-y повторяется нужное количество раз по мере увеличения строк текста. Шапка и подвал крепятся к элементу текста псевдоэлементами before и after. Проблема в том, что у шапки при изменении экрана уменьшается ширина и, соответственно, пропорционально уменьшается высота, следом появляется зазор между псевдоэлементом и элементом текста. Вот такой трабл. Как решить?

UPDATE:
Вот такой вот зазорчик появляется.

Comments

[Lynn «Кофеман»]

Вообще это скорее похоже на задачу для border-image

Answer 1

[Максим Морев]

Вот так, например.


А вообще, если уменьшение радиуса скругления при уменьшении вьюпорта не требуется - смотрите на свойство border-image - просто идеальный кейс использования, изящнее будет.

Comments

[medbrat13]

Спасибо, помогли, не знал про такое свойство.