Image inside a parallelogram

Question

I have multiple images that need to be in a parallelogram shape like this:

They should be enclosed in div 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.

Which CSS property is used to transform the images into parallelogram shapes like in the above example?

Answer 1

There is a method in transform for skewing objects. The only thing you will have to look out for is that everything in the div will skew also. So you have to apply it twice. Once to skew the div a certain number of degrees and then again to skew the picture inside back the opposite direction.

For example if you do this to the div: transform: skewX(10deg);

You'll have to do this to the picture: transform: skewX(-10deg);

Here's a link to read some more about transform - because there's more then meets the eye.