Как сделать вырез в картинке?

Question

[smiof]

Как такое сделать

Answer 1

[Александр]

Вы можете обойтись из без png изображений. Для цветного изображения используйте :before/:after и с помощью них и бордеров создайте серые зоны (уголки), которые будут накрывать цветное изображение. Как создавать уголки можете глянуть сюда: css.yoksel.ru/strelki-s-pomoshh-yu-svojstva-border

Comments

[Ksider]

но как сделать коричневую границу?

[Александр]

Ksider: можете изображение обвернуть в блок-враппер, над ним сделать такие же действия как и над изображением только залить коричневый цветом и сместить на толщину бордера вверх.

Answer 2

[Алексей Николаев]

Нижний блок с вырезом (белый) делаете png-изображением, и при помощи :after накладываете его на блок с картинкой.