如何消除两张三角形拼接倾斜图片间的白色间隙？

兄弟，这种拆分图片拼接后出现白色间隙的坑我踩过好多次！别慌，大概率是这几个常见原因导致的，给你几个针对性的解决办法，你挨个试，肯定能搞定：

• 干掉inline元素的默认间距
  咱们用的<img>标签属于inline-block元素，浏览器会默认给它加上类似文字空格的间距，这是最常见的间隙来源。你可以给它们的父容器.pageOption加这段CSS：

  .pageOption {
    font-size: 0;
    letter-spacing: 0;
    word-spacing: 0;
  }
  

  注意如果这个父容器里还有文本内容，记得单独给文本元素恢复正常的font-size哦。

• 彻底清除内外边距和边框
  检查下.option或者<img>有没有被不小心加上了margin、padding甚至透明边框，哪怕1px的额外空间都可能造成间隙。直接给相关元素加上：

  .option, .option img {
    margin: 0;
    padding: 0;
    border: none;
  }
  

• 用flex布局强制紧密排列
  布局方式也可能导致间隙，试试用flex让两个图片完全贴合：

  .pageOption {
    display: flex;
  }
  .option {
    flex: 1; /* 让两个图片平分父容器宽度 */
  }
  .option img {
    width: 100%;
    height: auto;
    display: block; /* 去掉图片底部的默认行高间隙 */
  }
  

• 用clip-path+绝对定位完美贴合（推荐！）
  其实拆分三角形最靠谱的方式是让两张图完全重叠，再用clip-path分别裁剪出三角形区域，这样绝对不会有间隙。代码示例：

  .pageOption {
    position: relative;
    width: 800px; /* 改成你原始图片的宽度 */
    height: 600px; /* 改成你原始图片的高度 */
  }
  .option {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 裁剪左上三角形 */
  .option:first-child img {
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  /* 裁剪右下三角形 */
  .option:last-child img {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  

• 解决浏览器抗锯齿白边
  有时候间隙是浏览器渲染抗锯齿导致的细微白边，你可以给其中一个图片加1px的负margin，或者让它们轻微重叠：

  .option:last-child {
    margin-left: -1px;
  }
  

  或者用transform微调：

  .option:last-child {
    transform: translate(-1px, 0);
  }
  

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