Конструктор багетной рамы, какие варианты есть?

Question

[Павел Антонов]

На входе имеем кусочек багета, примерно такой


И фотография, загруженная пользователем.
Необходимо обернуть багетом эту фотографию в рамку.

Какие способы решения здесь можно использовать? Как сделали бы вы?

Мне понравился css border-image но он не подходит так как там исходное изображение рамки уже склееное должно быть, мне же приходится работать с тем что есть, а есть только такие прямоугольные куски багетов.

Был предложен вариант использовать canvas и как-то там все это дело оборачивать в рамку, но не работал с канвасом, понятия не имею может ли он такое вообще.

В общем буду благодарен за любые ответы в этом направлении.

Answer 1

[Alex Kyznetsov]

1-е
2-е

Answer 2

[xtala zen]

а есть только такие прямоугольные куски багетов

Можно попробовать сделать из них бесшовные текстуры и уже дальше работать с ними. Чтобы сымитировать багет, вокруг фотографии нужно сделать 4ре блока div со свойство skew чтобы имитировать скос багета https://www.w3schools.com/css/tryit.asp?filename=t... , задать направление бекграунда X или Y оси, а так же масштабировать сам бекграунд, т.е рисунок багета, чтобы он не выглядел слишком крупным или мелким.

Comments

[Павел Антонов]

во, уже что-то, спасибо)

[xtala zen]

Павел Антонов: у Мержевича в книге "Поваренная книга CSS " есть подробное решение вроде, если мне память не изменяет.

Answer 3

[Ankhena]

а есть только такие прямоугольные куски багетов

Я бы склеила их в фотошопе для нормального результата и использовала border-image. А не насиловала бы браузер трансформами и лишними блоками.