如何用clip-path或CSS skew消除图片斜切空白并实现无缝拼接？

针对你用clip-path或CSS skew实现图片斜切并紧密拼接的需求，下面给出两种可行的实现方案，解决现有代码中存在的空白问题：

方案一：优化clip-path实现（推荐） #

现有代码的问题在于容器未做位置调整，且clip-path的顶点坐标未对齐，导致图片间出现空白。调整思路如下：

• 给每个图片容器设置固定宽度，通过负margin让相邻图片的斜切边缘重叠
• 修正clip-path的顶点数值，确保前后图片的斜切边完全衔接

修改后的代码 #

CSS

.cont__imagenes{
  display: flex;
  overflow: hidden; /* 裁剪容器外的溢出部分 */
}

.subcont__imagenes{
  width: 350px;
  height: 500px;
  margin-right: -87px; /* 负margin抵消斜切空白，数值按图片宽度和斜切比例计算 */
}

.img__{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.corte_inicial{
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); /* 右下顶点设为75%，对应后续图片的左上起点 */
}

.corte_diagonal{
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); /* 左上25%接前一张右下75%，右下75%接下一张左上25% */
}

.corte_final{
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); /* 最后一张补全右侧边缘 */
}

HTML

<div class="cont__imagenes">
  <div class="subcont__imagenes">
       <img class="img__ corte_inicial" src="https://source.unsplash.com/random/?winter,night" alt="">
  </div>
  <div class="subcont__imagenes">
         <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?space,night" alt="">
  </div>
  <div class="subcont__imagenes">
       <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?winter" alt="">
  </div>
  <div class="subcont__imagenes">
        <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/900×700/?space" alt="personas">
  </div>
  <div class="subcont__imagenes">
       <img class="img__ corte_final" src="https://source.unsplash.com/random/?montain" alt="">
  </div>
</div>

关键说明：

• margin-right: -87px是根据350px的图片宽度和75%的斜切比例计算得出，确保相邻图片的斜切边完全贴合
• clip-path的顶点数值统一为25%和75%，保证前后图片的边缘完全对齐

方案二：用CSS skew实现 #

如果需要更好的浏览器兼容性，可以用skew变换实现，思路是：

• 给容器设置skewX()实现斜切，再用overflow:hidden裁剪
• 内部图片反向skewX()，抵消容器的变形，保持图片内容正常

修改后的代码 #

CSS

.cont__imagenes{
  display: flex;
  overflow: hidden;
}

.subcont__imagenes{
  width: 350px;
  height: 500px;
  margin-right: -87px;
  transform: skewX(-15deg); /* 斜切角度可按需调整 */
  overflow: hidden;
}

.img__{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: skewX(15deg); /* 反向斜切抵消容器变形 */
  transform-origin: top left; /* 确保图片对齐 */
}

/* 首尾容器调整边缘效果 */
.subcont__imagenes:first-child{
  transform: skewX(0);
}
.subcont__imagenes:first-child .img__{
  transform: skewX(0);
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
}

.subcont__imagenes:last-child{
  transform: skewX(0);
  margin-right: 0;
}
.subcont__imagenes:last-child .img__{
  transform: skewX(0);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}

HTML（与原代码一致）

<div class="cont__imagenes">
  <div class="subcont__imagenes">
       <img class="img__" src="https://source.unsplash.com/random/?winter,night" alt="">
  </div>
  <div class="subcont__imagenes">
         <img class="img__" src="https://source.unsplash.com/random/?space,night" alt="">
  </div>
  <div class="subcont__imagenes">
       <img class="img__" src="https://source.unsplash.com/random/?winter" alt="">
  </div>
  <div class="subcont__imagenes">
        <img class="img__" src="https://source.unsplash.com/random/900×700/?space" alt="personas">
  </div>
  <div class="subcont__imagenes">
       <img class="img__" src="https://source.unsplash.com/random/?montain" alt="">
  </div>
</div>

关键说明：

• 容器和图片的反向skew确保图片内容不变形
• 首尾容器用clip-path补全边缘，避免多余斜切效果

内容的提问来源于stack exchange，提问作者A P I