Сергей Марченко: Скорее всего вы поздно подключаете css. Попробуйте вставить display: none для div непосредственно в html через тег style, прямо перед кодом.
Дмитрий Антонов: на вскидку 5 причин недальновидности такого решения:
1. захотите поменять цвет границы или ее толщину придется переделывать картинки.
2. если карточка товара больше 1000px по вертикали или по диагонали - придется переделывать картинки.
3. картинки весят в десять-двадцать раз больше, чем соответствующий код.
4. загрузка сайта по протоколу http имеет ограничение - 5 потоков на 1 домен. соответственно 1 css файл загрузится быстрее чем css+2 картинки если принять во внимание, что грузятся и другие файлы.
5. выщербленный угол на картинке имеет фиксированные размеры. что будете делать когда его нужно будет поменять?
Дмитрий Антонов: Строго говоря мой ответ не совсем верный, т.к. нужно думать сколько пикселей у карточки товара займет заголовок в ширину. Вот более правильный codepen.io/aliencash/pen/vXYVbp
Андрей Яндуганов: Не будет, а должен? Я так понял вы хотели чтобы они был одинаковый все время, независимо от масштаба. Хотите чтобы масштабировался вместе с фоновым изображением - используйте относительные единицы изменения.
dhat: Вы могли бы скрывать ваше меню по медиазапросу совсем display: none, а уже в классе active давать ему видимость - display: block или что-то типа того.
Раскоментируйте background-color: transparent; и потом меняйте картинки как хотите.