求助：如何为两张图片添加斜向间隙？skew函数失效

你的代码无效的核心原因是：伪元素设置了background-color: transparent且z-index: -1（在图片下方），完全被图片覆盖且无可见样式，所以skew变换没有任何视觉效果。

下面提供两种可行的实现方案，确保图片保持正常显示的同时，形成斜向间隙：

方案一：伪元素遮罩法 #

通过给图片的相邻边缘添加斜切伪元素，利用容器背景色形成间隙：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff; /* 间隙将显示此颜色 */
}

.skew-wrapper {
  position: relative;
  overflow: hidden;
  width: 200px; /* 固定图片宽度，避免自适应偏差 */
}

.skew-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* 第一张图右侧斜切遮罩 */
.skew-wrapper:first-child:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px; /* 控制间隙宽度 */
  height: 100%;
  background-color: #fff; /* 与容器背景色一致 */
  transform: skew(-45deg);
  transform-origin: top right;
}

/* 第二张图左侧斜切遮罩 */
.skew-wrapper:last-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px; /* 控制间隙宽度 */
  height: 100%;
  background-color: #fff; /* 与容器背景色一致 */
  transform: skew(-45deg);
  transform-origin: top left;
}

HTML代码保持不变：

<div class="container">
  <div class="skew-wrapper">
    <img src="https://picsum.photos/id/815/200/200.jpg" alt="Your Image 1">
  </div>
  <div class="skew-wrapper">
    <img src="https://picsum.photos/id/100/200/200.jpg" alt="Your Image 2">
  </div>
</div>

方案二：clip-path裁剪法 #

直接对图片进行斜角裁剪，代码更简洁：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff; /* 间隙将显示此颜色 */
}

.skew-wrapper img {
  display: block;
  width: 200px;
  height: auto;
}

/* 裁剪第一张图的右侧斜角 */
.skew-wrapper:first-child img {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
}

/* 裁剪第二张图的左侧斜角 */
.skew-wrapper:last-child img {
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
}

调整说明 #

• 方案一中的width: 40px、方案二中的20px用于控制间隙宽度，可根据需求修改；
• 方案一中的skew(-45deg)可调整角度，改变斜切的倾斜程度；
• 确保容器background-color与伪元素/裁剪露出的背景色一致，形成统一的间隙效果。

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