如何实现带圆角的菱形图片及优化图片交错排列布局？

一、实现菱形图片的圆角效果 #

原生clip-path: polygon()只能生成直角多边形，要实现带圆角的菱形，需要使用clip-path: path()通过SVG路径语法定义带圆角的轮廓。示例代码如下：

img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  /* 20px为圆角半径，可按需调整 */
  clip-path: path('M75,20 C92,20 105,33 105,50 L130,75 C130,92 117,105 100,105 L75,130 C58,130 45,117 45,100 L20,75 C20,58 33,45 50,45 L75,20 Z');
}

路径中的数值基于图片中心与四角坐标计算，确保菱形对称，修改20px即可调整圆角大小。

二、优化菱形图片的交错排列（适配任意行数） #

原手动分组+负margin的方法灵活性差，改用CSS Grid布局可自动适配任意数量的图片，无论最后一行数量多少都能保持交错效果：

CSS代码 #

.container {
  display: grid;
  /* 自动填充列，每列宽度150px */
  grid-template-columns: repeat(auto-fill, 150px);
  /* 负行间距抵消图片偏移后的空隙 */
  row-gap: -75px;
  /* 水平居中排列 */
  justify-content: center;
}

.container img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  /* 可替换为带圆角/直角的菱形clip-path */
  clip-path: path('M75,20 C92,20 105,33 105,50 L130,75 C130,92 117,105 100,105 L75,130 C58,130 45,117 45,100 L20,75 C20,58 33,45 50,45 L75,20 Z');
}

/* 偶数位置图片向下偏移，实现交错 */
.container img:nth-child(even) {
  transform: translateY(75px);
}

HTML代码 #

<div class="container">
  <img src="https://images.....">
  <img src="https://images.....">
  <img src="https://images.....">
  <img src="https://images.....">
  <img src="https://images.....">
  <img src="https://images.....">
  <img src="https://images.....">
</div>

该方案优势：

• 无需手动分组，所有图片直接放入容器即可
• 自动适配屏幕宽度，列数随容器宽度动态调整
• 最后一行无论图片数量多少，交错效果均正常显示
• 代码简洁，维护成本低

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