Задать вопрос
markitantovm
@markitantovm
Художник, музыкант, литературовед

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

c03048db4b68425abd55eccd7f671f3f.PNG
Имеется вот такая рамка (ширина 1200px), нужно ее сделать адаптивной, как это сделать как можно легче? Так же в этой рамке есть элементы, выделенные красным цветом.
Само собой background-size: cover не подходит, так как рамка должна оставаться целиком на странице, желательно чтоб ее ширина была примерно 90% от ширины экрана, а высота подбиралась автоматически.
  • Вопрос задан
  • 320 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 2
Aligatro
@Aligatro
Turn food and coffee into software...
Можете попробовать вот так.
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
блоку border-image
цветы в ::before и ::after

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

С изогнутой рамкой: https://jsfiddle.net/ph8Lswz9/
Дальше можно развлекаться подбором фона у "цветка", прозрачностями и положением.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
aliencash
@aliencash
Партизан
Проще всего использовать border-image со специально подготовленной картинкой. А картинки с цветами на белом фоне спозиционировать абсолютно.
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы
11 дек. 2024, в 12:25
60000 руб./за проект
11 дек. 2024, в 12:21
2000 руб./в час
11 дек. 2024, в 12:02
5000 руб./за проект