title: Image inside a parallelogram
body: <p>I have multiple images that need to be in a parallelogram shape like this:</p>
  
  <p><img src="https://i.imgur.com/3UFTpLB.png" alt="parallelogram filled with image"></p>
  
  <p>They should be enclosed in <code>div</code> elements, in a carousel and link to video pages. However, using regular images causes bounding box issues with the links due to the transparent areas.</p>
  
  <p>Which CSS property is used to transform the images into parallelogram shapes like in the above example?</p>