Как верно сверстать такую карточку товара?

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

А вот с двумя псевдо элементами я чёт не додумался) но как вариант подходит )) Что то сам не додумылся )) Если лучше нечего не подкинут отмечу как решением)

Дмитрий Антонов: Строго говоря мой ответ не совсем верный, т.к. нужно думать сколько пикселей у карточки товара займет заголовок в ширину. Вот более правильный codepen.io/aliencash/pen/vXYVbp

И еще раз спасибо )) за варианты) думаю в будущем они тоже мне понадобятся)) но с изображением оказалась намного проще ))

Дмитрий Антонов: на вскидку 5 причин недальновидности такого решения:
1. захотите поменять цвет границы или ее толщину придется переделывать картинки.
2. если карточка товара больше 1000px по вертикали или по диагонали - придется переделывать картинки.
3. картинки весят в десять-двадцать раз больше, чем соответствующий код.
4. загрузка сайта по протоколу http имеет ограничение - 5 потоков на 1 домен. соответственно 1 css файл загрузится быстрее чем css+2 картинки если принять во внимание, что грузятся и другие файлы.
5. выщербленный угол на картинке имеет фиксированные размеры. что будете делать когда его нужно будет поменять?