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

Question

[Максим Маркитантов]

Имеется вот такая рамка (ширина 1200px), нужно ее сделать адаптивной, как это сделать как можно легче? Так же в этой рамке есть элементы, выделенные красным цветом.
Само собой background-size: cover не подходит, так как рамка должна оставаться целиком на странице, желательно чтоб ее ширина была примерно 90% от ширины экрана, а высота подбиралась автоматически.

Answer 1

[Aligatro]

Можете попробовать вот так.

Answer 2

[Ankhena]

блоку border-image
цветы в ::before и ::after

Как-то так https://jsfiddle.net/vujkwpq5/
Нижний цветок аналогично, адаптивности цветочку через media, думаю, сами справитесь. А нет, так спросите, что не получится.

С изогнутой рамкой: https://jsfiddle.net/ph8Lswz9/
Дальше можно развлекаться подбором фона у "цветка", прозрачностями и положением.

Comments

[Максим Маркитантов]

Для этого варианта подходит, но если у рамки будут не прямые границы, а с изгибами, то нет

[Ankhena]

Максим Маркитантов: где в вашем вопросе хоть слово про изогутные рамки.
И покажите картинку с изогнутой рамкой, подумаем чем помочь.

[Ankhena]

Максим Маркитантов: С изогнутой рамкой: https://jsfiddle.net/ph8Lswz9/
Дальше можно развлекаться подбором фона у "цветка", прозрачностями и положением.

Answer 3

[Андрей Федоров]

Проще всего использовать border-image со специально подготовленной картинкой. А картинки с цветами на белом фоне спозиционировать абсолютно.

Comments

[Максим Маркитантов]

Для этого варианта подходит, но если у рамки будут не прямые границы, а с изгибами, то нет

[alvvi]

Максим Маркитантов: для сложных случаев есть SVG