如何让图片覆盖带有::after斜切(skew)效果的div？

要解决图片无法完整覆盖斜切区域的问题，核心是让伪元素的背景与主图同步，并通过调整尺寸、变形参数适配斜切效果。如果需要图片保持不斜切，也可以通过反向变形实现。

调整后的完整代码： #

HTML

<div class="box">
  <img src="https://source.unsplash.com/random" alt="" class="img-fluid h-100 w-100">
</div>

CSS

.box{
  margin: 50px 20px;
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden; /* 防止斜切元素溢出容器 */
  background-image: url("https://source.unsplash.com/random"); /* 和主图保持同源 */
}
.box img {
  border-radius: 20px;
  object-fit: cover; /* 确保图片填充容器 */
}
.box::after{
  background-image: inherit; /* 继承父元素背景图，保证和主图一致 */
  background-size: cover;
  background-position: center; /* 居中对齐图片 */
  content: "";
  border-radius: 20px;
  width: calc(100% + 100px); /* 扩大宽度抵消斜切后的收缩 */
  height: 100%;
  position: absolute;
  top: 0;
  right: -50%;
  z-index: -1;
  transform-origin: top right;
  transform: skew(-30deg, 0deg);
}

/* 若需要图片保持不斜切，替换上述CSS中对应部分为以下代码 */
/*
.box img {
  border-radius: 20px;
  object-fit: cover;
  transform: skew(30deg, 0deg);
  transform-origin: top left;
}
.box::after{
  background-image: inherit;
  background-size: cover;
  background-position: center;
  content: "";
  border-radius: 20px;
  width: calc(100% + 100px);
  height: 100%;
  position: absolute;
  top: 0;
  right: -50%;
  z-index: -1;
  transform-origin: top right;
  transform: skew(-30deg, 0deg) scaleX(1.15);
}
*/

关键调整说明： #

• 给.box添加overflow: hidden，避免斜切后的元素溢出到容器外部
• 伪元素使用background-image: inherit，确保与主图片完全同步（需给.box设置和主图相同的背景地址）
• 扩大伪元素宽度为calc(100% + 100px)，抵消斜切变形导致的宽度收缩，保证覆盖完整区域
• 若要图片保持不斜切，给主图片添加反向skew(30deg)变形，同时调整伪元素的缩放比例，让图片视觉上无扭曲

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