Как кроссбраузерно сделать скошенный угол у div с интерактивными border'ами?

Question

[evil_eyes]

Есть макет карточки товара:

карточка

Необходимо сделать кроссбраузерно минимум под ie11. Соответственно, clip-path отпадает, т.к. нет поддержки в ie&edge (https://caniuse.com/#search=clip-path)

Я сделал так: https://codepen.io/evileyes/pen/JpzaZZ
Но меня гложет чувство того, что это какой-то костыль (толщина бордера скошенного угла явно отличается).
Как можно сделать это изящнее и более красиво?

Answer 1

[Ильдар Сарибжанов]

Я понимаю, что я не отвечаю на ваш запрос, но, мне кажется, тут либо костыли, либо фоновая картинка.

Может svg-фон будет проще сделать?

Comments

[evil_eyes]

не думаю, что это хороший вариант, т.к. придется шаманить с резиновым svg (карточка товара может растягиваться непропорционально по двум осям), а также, чтобы кроссбраузерно как-то решить вопрос с hover'ами и border'ами элементов - это скорее всего через js придется.