css - 平行四边形内的图像

Question

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

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

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

Answer 1

transform 中有一种方法可以使对象倾斜。您唯一需要注意的是 div 中的所有内容也会倾斜。所以你必须申请两次。一次将 div 倾斜一定度数，然后再次将内部图片向相反方向倾斜。

例如，如果您对 div 执行此操作:变换:skewX(10deg);

您必须对图片执行此操作:变换:skewX(-10deg);

这是阅读更多关于 transform 的链接- 因为还有更多内容。