Cross-browser how to make a beveled corner div with interactive border AMI?

Is the layout of the item card:
card
5a994647772f2803023092.png


It is necessary to make cross-browser at least ie11. Accordingly, the clip-path is eliminated, as there is no support in ie&edge (https://caniuse.com/#search=clip-path)

I did this: https://codepen.io/evileyes/pen/JpzaZZ
But I feel that this is some kind of crutch (the thickness of the border of the skew angle is clearly different).
How can I make it sleeker and more beautiful?
June 7th 19 at 14:42
1 answer
June 7th 19 at 14:44
I understand that I don't answer your request, but I think it's either the crutches or the background picture.

Can svg background will be easier to do?
I don't think this is a good option as I will have shaman with rubber svg (card of the product can be stretched disproportionately on two axes), as well as to cross-browser to solve the issue with hover'AMI and AMI border elements is most likely using js will have. - Gino.Mann21 commented on June 7th 19 at 14:47

Find more questions by tags HTMLCSSLayout