Как сверстать такое?

Question

[Alibek Kulseitov]

Я довольно таки опытный верстальщик но скажу честно 2 часа просидел и пробовал разные методы чтобы реализовать такую штуку. Будьте внимательны! Фон градиентовый, это я сказал к тому что не получится обмануть зрительно добавив такой цвет фотке вокруг.

Answer 1

[Дмитрий Гормаш]

https://jsfiddle.net/pfhrvcgs/

Comments

[Alibek Kulseitov]

Вот оно!))

[Александр Виноградов]

Что то не видно градиента

[Alibek Kulseitov]

Ruchey, вопрос в градиенте вообще не стоит)

Answer 2

[Dmitry Tallmange]

Очень странно, что такой опытный верстальщик ничего не знает о «градиентовых» фонах

Comments

[Alibek Kulseitov]

Причем тут фон)? я про реализацию рамки)))

[Dmitry Tallmange]

Алибек Кулсеитов, каков вопрос — таков ответ. Про рамку не было ни слова

[Alibek Kulseitov]

Dmitry Tallmange, Я же написал четко " Будьте внимательны! Фон градиентовый, это я сказал к тому что не получится обмануть зрительно добавив такой цвет фотке вокруг."
Это было к тому что если бы фон был одного цвета то можно было бы добавить такой же цвет фона к фотке и и иконке и добавить воздуху паддингами или бордерами вот.

[Dmitry Tallmange]

Алибек Кулсеитов, телепаты в отпуске

[Ankhena]

Алибек Кулсеитов, Хуже, что грамотный верстальщик не умеет пользоваться поиском. Аналогичных вопросов в разных модификациях только за праздники было несколько штук.

Answer 3

[Hyubert]

или через псевдоелементы

Answer 4

[NaN]

можно border-top задать border-image, либо воспользоваться таким способом (но придется потратить достаточно времени) https://codepen.io/ViktoriaKorneva/pen/zpRBZX