如何将带背景图的正方形Div转为无X轴旋转的2D梯形？

下面给你几个可行的技巧，能实现类似PS扭曲工具的2D梯形效果，让背景图跟着形状变形：

1. 优化3D变换（视觉接近2D，代码最简单） #

虽然rotateX是3D变换，但调整参数后能做到视觉上的2D梯形，背景图自动跟着变形：

.trapezoid {
  width: 200px;
  height: 200px;
  background: url('你的图片路径') center/cover;
  /* 调整perspective和scaleY抵消透视压缩，让高度正常 */
  transform: perspective(1000px) rotateX(30deg) scaleY(1.15);
  transform-origin: bottom;
}

这个方案代码少，不用额外元素，缺点是本质还是3D变换，但视觉效果足够接近需求。

2. SVG实现真实2D扭曲 #

用SVG可以直接创建梯形路径，让图片真正扭曲适配，完全是2D层面的效果：

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <!-- 定义梯形裁剪路径，上边左右各缩进40px -->
    <clipPath id="trapezoidClip">
      <polygon points="40,0 160,0 200,200 0,200" />
    </clipPath>
  </defs>
  <!-- 图片应用裁剪路径，自动适配梯形形状 -->
  <image href="你的图片路径" width="200" height="200" clip-path="url(#trapezoidClip)" />
</svg>

如果需要更灵活的变形，还可以用SVG的矩阵变换或者滤镜来调整。

3. Canvas手动绘制变形图 #

用Canvas API可以精确控制图片的变形，完全自定义梯形的形状：

const canvas = document.getElementById('trapezoidCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.src = '你的图片路径';
img.onload = () => {
  canvas.width = 200;
  canvas.height = 200;
  
  // 先定义梯形的四个顶点
  ctx.beginPath();
  ctx.moveTo(40, 0);   // 左上角
  ctx.lineTo(160, 0);  // 右上角
  ctx.lineTo(200, 200); // 右下角
  ctx.lineTo(0, 200);  // 左下角
  ctx.closePath();
  
  // 通过变换矩阵把图片映射到梯形区域
  ctx.save();
  // 计算缩放和倾斜参数，让图片适配梯形
  const scaleX = (160 - 40) / img.width;
  const skewX = (200 - 160) / img.height;
  ctx.transform(scaleX, 0, skewX, 1, 40, 0);
  ctx.drawImage(img, 0, 0);
  ctx.restore();
};

这个方案完全是2D变形，能精准控制每个顶点的位置，适合需要高度定制的场景。

4. 简易裁剪方案（适合精度要求不高的场景） #

如果只是需要显示梯形区域，背景图不用严格扭曲，用clip-path配合背景缩放就能快速实现：

.trapezoid {
  width: 200px;
  height: 200px;
  /* 缩放背景图适配裁剪后的区域 */
  background: url('你的图片路径') center/120% 100%;
  /* 定义梯形裁剪路径，上边占宽度的60% */
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

缺点是背景图只是被裁剪，没有真正扭曲，但实现简单，适合快速开发。

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