如何用CSS实现两张正方形图片对角重叠成三角形及边缘渐变融合？

实现思路 #

通过定位让两张正方形图片无间隙拼接，再利用CSS遮罩（mask）实现拼接处的渐变过渡效果。

HTML结构 #

<div class="image-wrap">
  <img src="图片1地址" alt="左侧图片" class="square-img">
  <img src="图片2地址" alt="右侧叠加图片" class="square-img overlay">
</div>

CSS代码 #

/* 容器：设置正方形尺寸，作为定位基准 */
.image-wrap {
  position: relative;
  width: 300px; /* 可根据需求修改正方形边长 */
  height: 300px;
}

/* 基础正方形图片样式 */
.square-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片填充正方形，自动裁剪多余部分 */
}

/* 叠加图片的定位与渐变遮罩 */
.overlay {
  position: absolute;
  top: 0;
  left: 50%; /* 从容器中间位置开始放置 */
  width: 50%; /* 仅显示叠加图片的右侧一半 */
  /* 左侧渐变遮罩：实现从透明到不透明的过渡 */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
  mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}

效果说明 #

• 无间隙拼接：通过绝对定位将叠加图片从容器中间开始放置，只显示自身右侧50%区域，与下方图片的左侧50%区域完全拼接。
• 渐变过渡：利用mask-image给叠加图片添加左侧透明渐变，让两张图片在拼接处自然融合，避免生硬边界。
• 自定义调整：修改容器宽高可改变正方形尺寸；调整渐变参数（如rgba(0,0,0,0) 10%, rgba(0,0,0,1) 30%）可控制渐变过渡的宽度和强度。

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