平行四边形内的图像

Question

我有多个图像需要像这样的平行四边形:

它们应该包含在div元素中,旋转木马中并链接到视频页面.但是,由于透明区域,使用常规图像会导致链接出现边界框问题.

使用哪个CSS属性将图像转换为平行四边形形状,如上例所示？

Answer 1

对于倾斜对象,有一种变换方法.你唯一需要注意的是div中的所有内容也会产生偏差.所以你必须应用它两次.一旦将div倾斜一定数量的度数,然后再将图像向内倾斜反向相反的方向.

例如,如果您对div执行此操作: transform: skewX(10deg);

你必须这样做: transform: skewX(-10deg);

这里有一个关于阅读更多关于变换的链接- 因为还有更多的东西可以满足你的需求.