How to get a div of such form that works in all browsers (IE10+)?
<p>I am facing an issue with the div element of such form:</p>

<p><a href="https://i.stack.imgur.com/mqeqL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mqeqL.jpg" alt="enter image description here"></a></p>

<p>Any ideas on how to get this shape? Ideally, the solution should work at least in IE10+. Thanks in advance.</p>

<p>Do not suggest to split images. I am aware of this. Triangles on both sides must be transparent.</p>

<p><strong>BIG BIG EDIT</strong></p>

<p><a href="https://i.stack.imgur.com/74YYr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/74YYr.jpg" alt="enter image description here"></a></p>

<p>This is what should be avoided. Grey background should stay uncovered.</p>