Как сверстать непростую рамку?

Question

[Степан Смыковский]

Answer 1

[Ankhena]

Элементарно, через border-image градиентом

border: 3px solid transparent;
  border-image: linear-gradient(to bottom,#adf2f7 10px,  transparent 20px, transparent calc(100% - 20px), #adf2f7  calc(100% - 10px));
  border-image-slice: 1;

https://jsfiddle.net/kv26e0fu/
Значения для разрыва и размытия подберите сами.

Для адптива можно разбить на 2 части, верхнюю и нижнюю и поместить в before и after. Так можно добиться независимости от размера шрифта и количества строк.

Answer 2

[Максим Тимофеев]

простой картинкой.
И убейте человека который это нарисовал. Как он представляет себе рамку, если вторая строка будет по ширине как первая? Что будет если строк будет 18?

Comments

[Moskus]

Тоже голосую за "убить дизайнера".

Answer 3

[Дмитрий Гончаров]

Попробуй с помощью Before и After, тоже как вариант
В них картинку залей, тогда не особо важно сколько строк будет