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

Question

[emeryshow]

Как сделать такой блок:



Проблема именно, иконка внутри обводки...
Есть идея, сделать через before изображение с белым фоном, но это наверное не лучшее решение.
Помогите пожалуйста)

Comments

[Pavel Kuzyakin]

почему не лучшее? задаете before background с картинкой и позиционируете через absolute

[Виолетта Морозова]

да, так и делается

Answer 1

[Сергей delphinpro]

Вот отсюда должен стать понятным базовый принцип построение таких рамок
https://codepen.io/the_human_brian/pen/vOrbBG

Answer 2

[Stalker_RED]

Если прозрачный фон не требуется, то норм

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

Answer 3

[Матвей Феникс]

Именно такое решение, которое вы написали - самое простое и лучшее.
Либо просто положили внутри relative блока-родителя дочерний блок с absolute и background белого цвета, либо сгенерировали его через псевдоэлемент :before.

Comments

[Сергей delphinpro]

Самое простое, но не лучшее. Изменение фона — меняй картинку.

[Stalker_RED]

Сергей delphinpro, можно картинку с прозрачным фоном.