Как сделать border с картинкой у которой есть фон?

Question

[DZHAMBUALT]

Здраствуйте. Столкнулся с такой ужасной вещью как дизайнерский взгляд. В макете есть блок у которого есть кастомный бордер. Я конечно понимаю что можно сделать через before и after и добавить картинку, но проблема с фоном картинки.



У картинки есть свой ПРОЗРАЧНЫЙ фон. Если бы он был не прозрачным я бы взял вместе с фоном и вставил бы в before.


Еще масла в огонь заливает тот факт что этот бордер входит на территорию блока


Из-за этого если я возьму картинку с фоном и добавлю в before то из-за прозрачности фоны буду накладываться друг на друга и создавать чуть темный цвет в месте соединения

Для контраста добавил синий цвет. Там ели ели видно наложение фона но оно есть и это нужно решить

Comments

[Aleksey Solovyev]

В чем проблема вырезать фон у картинка с бордюром и не будет:

Из-за этого если я возьму картинку с фоном и добавлю в before то из-за прозрачности фоны буду накладываться друг на друга и создавать чуть темный цвет в месте соединения

[Ivan Ustûžanin]

border-image? он умеет на основе одной картинки не только бордер, но и задник делать (правда делал не сам, а видел где-то в примерах)

[Ankhena]

Если бы он был не прозрачным я бы взял вместе с фоном и вставил бы в before.

Так уберите его.
И дальше обычный border-image.
У кнопок-то ведь тоже без фона же делаете.

[DZHAMBUALT]

Ankhena, Aleksey Solovyev, Ivan Ustûžanin Смотрите какой прикол без фона.


Думаю border-image не то что нужно так как его чуть наверх относительно родителя нужно сместить и тут translate-y подходит с позиционированием

[Ankhena]

DZHAMBUALT, пристыкуйте эту часть отдельно. Или только фон от неё. Или делайте фон блока кусочками из градиентов.

Answer 1

[Сергей delphinpro]

DZHAMBUALT, вырежьте картинку верхней рамки, уберите фон. в узкой полоске вверху фон не убирайте. Чуть-чуть подгоните размеры. скруглите углы у блока, если они будут видны из-под картинки.
картинку положите в два псевдо по 50%
у левого background-position: 0 0; у правого background-position: 100% 0;
Картинку сделать подлиннее (клонировать среднюю полоску) - так вы легко сделаете блок переменной ширины.
картинка простая фигура, лучше использовать svg.

PS. Вернуть бы вас лет на 10-15 во времени. Тогда такие дизайнерские рамки были в моде, а css был не особо продвинутый. И ничего - верстали.

Comments

[DZHAMBUALT]

Да уж костыльненько но что поделать