如何实现图片和视频的上下非对称倾斜显示？

我希望能像示例中那样倾斜显示图片和视频。我尝试使用transform: skewY(-15deg);无法实现需求，因为该属性会使元素上下方向朝同一方向倾斜，而我需要底部向上倾斜、顶部向下倾斜的效果，同时图片还需带有轻微的倾斜角度，请问该如何实现？

解决方案1：用clip-path裁剪梯形（不扭曲内容） #

直接通过裁剪元素形状实现双向倾斜，图片内容不会被拉伸扭曲：

.slanted-media {
  /* 调整百分比控制倾斜幅度：依次为顶部左、顶部右、底部右、底部左 */
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
  /* 添加轻微整体倾斜 */
  transform: rotate(1deg);
}

将图片/视频添加这个类，修改polygon的百分比就能精准调整顶部、底部的倾斜程度。

解决方案2：嵌套容器+反向skew（内容随形状变形） #

如果需要元素整体变形（内容同步倾斜），可以用两层容器配合反向偏移：

/* 父容器：实现底部向上倾斜 */
.slanted-wrap {
  transform: skewY(-4deg);
  overflow: hidden;
}
/* 子元素：反向倾斜抵消父容器影响，同时实现顶部向下倾斜 */
.slanted-media {
  transform: skewY(8deg) rotate(1deg);
}

通过父子容器的skewY反向值组合，达成上下边反向倾斜的效果，最后用rotate添加整体轻微倾斜。

解决方案3：matrix自定义变形矩阵（精准控制） #

用变形矩阵直接定义元素的倾斜规则，自由度更高：

.slanted-media {
  /* matrix(a,b,c,d,e,f)，调整b/c值控制倾斜方向和幅度 */
  transform: matrix(1, 0.08, 0.08, 1, 0, 0) rotate(1deg);
}

matrix的第二个参数（b）控制顶部倾斜，第三个参数（c）控制底部倾斜，数值越大倾斜越明显。

内容的提问来源于stack exchange，提问作者Twinkle