Как обрубить верхний-левый угол у div имея неоднородный фон?

искал этот способ)

BarryHAllen, А как с вашим решением сделать границу по периметру ? У меня в примере она была, вы ее убрали.

mr jeery
немного магии
https://codepen.io/anon/pen/mKzOrz

BarryHAllen, если img кота сдвинуть влево left: -40px;, то изображение накладывается на левую границу. Как это избежать ?

Сейчас с телефона, поэтому только логика, без кода.

С svg проще

Ankhena, Как с svg проще ? Вы в каком-то редакторе с ними работаете а потом экспортируете код ? Я пробовал со скетча экспортировать, но он с ошибками вылезает.

mr jeery, например, вот так: https://jsfiddle.net/rwcaj9g5/

Почитайте: css.yoksel.ru/svg-shapes
css.yoksel.ru/svg-fill-and-stroke
И qaru.site/questions/132892/svg-rounded-corner

Алексей это какой-то изврат, занимает слишком много места.

можно добавить еще одну обертку, тогда размеры будут такие как нужно

Алексей, Если я хочу чтобы три карточки стояли друг за другом, с помощью flex row, то обертка мешает. Как можно добавить еще одну чтобы все ок было ?