嘿，我刚好有两个纯CSS3的方案能解决这个斜向分隔的问题，完全不需要JavaScript，亲测有效！我之前做类似需求的时候踩过不少坑，这两种方法应该能帮你达到预期效果。

方案一：使用clip-path裁剪斜角（推荐，代码简洁） #

这个方法通过裁剪图片容器的边角，直接形成斜向分隔的效果，视觉上就是两张图通过斜线无缝拼接在一起。

HTML结构 #

<div class="image-split-container">
  <div class="image-item left">
    <img src="left-image.jpg" alt="左侧图片">
  </div>
  <div class="image-item right">
    <img src="right-image.jpg" alt="右侧图片">
  </div>
</div>

CSS代码 #

.image-split-container {
  display: flex;
  width: 100%;
  max-width: 1200px; /* 可根据需求调整容器宽度 */
  margin: 0 auto;
  overflow: hidden;
}

.image-item {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 400px; /* 固定高度或用object-fit自适应 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

/* 左侧图片裁剪右下角斜角 */
.image-item.left {
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  /* 调整92%这个值可以改变斜角倾斜程度，数值越小斜线越陡 */
}

/* 右侧图片裁剪左上角斜角 */
.image-item.right {
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
  /* 这里的8%要和左侧的92%对应（100%-92%=8%），保证分隔线完全对齐 */
  margin-left: -8%; /* 抵消裁剪后留下的空隙，让两张图紧密拼接 */
}

说明 #

• clip-path: polygon() 是CSS3的裁剪属性，通过定义多边形坐标裁剪元素，现代浏览器都支持；
• 调整百分比可灵活控制斜线倾斜角度，只要左右百分比相加等于100%，就能保证分隔线对齐；
• object-fit: cover 确保图片在容器内保持比例，不会被拉伸变形。

方案二：使用伪元素+transform: skew() 实现带颜色的斜向边框 #

如果需要在分隔线处添加纯色边框，这个方法更合适——通过伪元素生成斜向色块作为分隔边框。

CSS代码（基于上述HTML结构修改） #

.image-split-container {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.image-item {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* 给右侧图片添加斜向伪元素作为分隔边框 */
.image-item.right::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px; /* 调整这个值控制边框宽度 */
  width: 40px;
  height: 100%;
  background-color: #fff; /* 边框颜色，可自定义 */
  transform: skewX(-10deg); /* 调整角度改变倾斜程度 */
  z-index: 1;
}

说明 #

• 伪元素通过transform: skewX()实现倾斜，定位到两张图的交界处；
• 调整skewX()的角度和伪元素的宽度，可控制边框的倾斜程度和粗细；
• 伪元素的z-index要高于图片，确保边框显示在最上层。

这两种方法都完全符合你的要求：纯CSS3实现，不需要JavaScript，还能精准控制斜向分隔的效果。你可以根据自己的需求（是否需要边框颜色）选择对应的方案~

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