transform:skewY 搭配 overflow:hidden 失效问题咨询

我之前也踩过这个CSS坑，这本质是变换堆叠上下文和裁剪规则的冲突问题。你现在的情况是：用伪元素给容器加了倾斜效果，但容器的overflow:hidden没正确裁剪内部图片——核心原因是伪元素的transform会创建独立的堆叠上下文，导致容器的裁剪边界无法覆盖变换后的伪元素和内部内容。

下面给你两种针对性的解决方案，根据你的需求选就行：

方案1：容器倾斜+内容反向倾斜（推荐，阴影也会跟着倾斜） #

这种方式让容器本身应用倾斜变换，内部内容反向抵消倾斜，既能保证overflow:hidden正常裁剪，还能让容器的box-shadow跟着倾斜形状显示，完美匹配你的需求：

.skew-container {
  position: relative;
  transform: skewY(-2.3deg); /* 容器整体倾斜 */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 你的阴影样式 */
  /* 可以加固定高度或让内部图片撑起容器高度 */
  min-height: 300px;
}

.skew-container img {
  transform: skewY(2.3deg); /* 反向倾斜，让图片视觉上恢复矩形 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片铺满容器，避免变形 */
  display: block;
}

方案2：伪元素做倾斜背景（阴影保持矩形） #

如果你希望容器的box-shadow是矩形，只需要内部背景倾斜，那可以把伪元素作为背景层放在内容下方，容器的overflow:hidden就能正常裁剪图片：

.skew-container {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-height: 300px;
}

.skew-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: skewY(-2.3deg);
  background-color: #ffffff; /* 替换成你需要的背景色 */
  z-index: -1; /* 把背景层放在图片下方 */
}

.skew-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

关键注意事项 #

• 一定要给容器设置明确的高度（或者让内部图片撑起高度），否则overflow:hidden没有裁剪边界，自然不会生效。
• 若需兼容老浏览器，可给transform添加前缀（比如-webkit-transform、-moz-transform），不过现代浏览器基本无需额外处理。
• 方案1的box-shadow会随容器倾斜渲染，适合需要倾斜阴影的场景；方案2阴影保持矩形，适合追求规整阴影的需求。

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