title: (CSS) skew img frame without distorting image
body: <p>I'm making a website that contains many skewed elements, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/C4ds1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C4ds1.png" alt="enter image description here"></a></p>
  
  <p>This isn't too bad, there are CSS transforms that could skew it. But how about this:</p>
  
  <p><a href="https://i.stack.imgur.com/g6Tn3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g6Tn3.png" alt="enter image description here"></a></p>
  
  <p>The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?</p>