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

Question

[Виктория]

Как делают такие рамки?

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

Comments

[Ankhena]

Начать с чтения правил сервиса. Там написано как нужно вставлять картинки.
Но я бы не докапывалась, если бы её было видно.

Не знаю, что на скрине, но вариантов несколько:
- вставить фоном
- нагуглить свойство border-image

[Ankhena]

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

Вес у такой картинки с орнаментом близок к "нисколько", так что я бы взяла её почти целиком (на сколько она там на 2 или на 3 столбца) и задала фоном к этому списку.
Почему почти? Вензелек, на который указывает верхняя стрелка, отрезала бы отдельно и повесила бы либо тоже фоном к большому списку либо как псевдо к элементам. Для того, чтобы все прилично выглядело, если текста будет больше.

[Антон Литвиненко]

Такие рамки родом из 2000х, зачем их вставлять?)

Answer 1

[high-draw]

Это сильно зависит от того, может ли растягиваться данный блок и сжиматься или нет, т.е. резиновая ли вёрстка.

Если резиновая, то надо нарезать сам орнамент справа, до того места где полоса становится горизонтальной. Вставить этот орнамент через position: absolute, поставить нужные параметры bottom и right. Контейнеру естественно ставим position relative.

Далее нижний бордер блоку. И чтобы он не шёл туда где он не должен быть, нужно его перекрыть чем-то. Других вариантов особо нет.

Слева как вставить - у левого блока сделать псевдо-элемент :after

Вертикальную полосу тоже придётся делать бордером и отдельным ещё одним псевдоэлементом, например :before

Нижний маленький орнамент тоже делаем дополнительным блоком левого блока. Используем position: absolute;

Comments

[Виктория]

Большое спасибо за подробности, буду пробовать)