clip-path

裁剪包裹方式1

当倾斜柱的水平延伸(相对于柱宽)保持恒定而不是角度不变时,这是优选的。这不需要三角函数或容器查询,但需要分数计算。

clip-path

裁剪包裹方式2

但当角度保持不变时,它也可以使用。除了分数计算外,这还需要容器查询和三角函数,以及在图形包装器中嵌套img元素。

transform

裁剪包裹方式3

当角度保持恒定时更为理想。需要容器查询和三角函数,以及在图形包装器中嵌套img元素,这样我们就可以在实际图像的容器倾斜后取消其倾斜。