我正在尝试将带有背景图像的方形 div 转换为梯形。
我想以 2D 形式制作它，与 Photoshop 的“扭曲”工具的方式几乎相同。
基本上，我想要的只是缩小正方形的顶边并使图像相应变形。
3D 转换“似乎”能够解决问题：
transform: rotateX(30deg);
它适用于大多数用例，但并非全部。 事实上，它是一个 30 度旋转的正方形，从正面/背面看时“看起来”像梯形，但从任何其他侧面看时仍然是 30 度旋转的正方形。
我想要的是得到一个真正的梯形。我希望方形图像以 2D 方式扭曲，以便形状和图像实际上发生变化，而不涉及旋转。
我尝试了这个，它在形状（梯形）方面有效：
border-style: solid; height: 0; border-color: transparent transparent red transparent; border-width: 0 100px 100px 100px;
但是我无法用失真后的背景图像替换红色区域。这违背了我的目的。 我尝试的任何尝试都会使图片保持不变形。
是否有任何 css/html5/javascript 技巧可以实现我想要的？
谢谢。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
1137
收藏
