为形状应用背景图：如何实现方形背景图形变且图片不跟随旋转

下面是三种无需JS、纯CSS即可实现需求的方案，均不会导致图片内容随容器变形：

方案1：clip-path 裁剪（首选方案） #

直接将容器裁剪为目标平行四边形形状，不影响内部内容的展示角度，现代浏览器兼容性良好。

.target-element {
  width: 500px;
  height: 350px;
  background: url(你的图片路径) center/cover no-repeat;
  /* 四个参数依次对应左上角、右上角、右下角、左下角的坐标，调整百分比可修改倾斜幅度 */
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

方案2：反向斜切抵消变形（兼容旧版浏览器） #

通过父子元素反向skew变换实现，父容器斜切得到平行四边形，子元素反向斜切抵消变形，保证图片角度正常。

<div class="shape-container">
  <div class="bg-inner"></div>
</div>

.shape-container {
  width: 500px;
  height: 350px;
  overflow: hidden;
  /* X轴斜切角度可按需调整 */
  transform: skewX(-12deg);
}
.bg-inner {
  width: 100%;
  height: 100%;
  background: url(你的图片路径) center/cover no-repeat;
  /* 反向斜切抵消父容器的变形 */
  transform: skewX(12deg);
  /* 可选：放大内容避免斜切后两边出现空白 */
  transform-origin: center;
  scale: 1.15;
}

方案3：CSS mask 遮罩 #

适合需要叠加其他遮罩效果的场景，通过渐变生成平行四边形遮罩层裁剪内容。

.target-element {
  width: 500px;
  height: 350px;
  background: url(你的图片路径) center/cover no-repeat;
  mask: linear-gradient(-12deg, #000 88%, transparent 0);
  -webkit-mask: linear-gradient(-12deg, #000 88%, transparent 0);
}

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