如何实现多张圆形图片横向轻微重叠呈扇形排列的展示效果

解决方案 #

HTML结构无需改动，仅调整CSS即可实现所需效果，核心是通过负边距控制重叠程度、z-index控制元素层级，保证右侧图片叠在左侧图片上方：

.main-container {
  height: fit-content;
  padding-top: 3rem;
}

#icons-container {
  display: flex;
  position: relative;
  justify-content: center;
}

.single-icon-container {
  position: relative;
}

/* 控制重叠距离，数值越大重叠程度越高 */
.single-icon-container:not(:first-child) {
  margin-left: -12px;
}

/* 按顺序设置层级，越靠右侧层级越高 */
.single-icon-container:nth-child(1) { z-index: 1; }
.single-icon-container:nth-child(2) { z-index: 2; }
.single-icon-container:nth-child(3) { z-index: 3; }
.single-icon-container:nth-child(4) { z-index: 4; }
.single-icon-container:nth-child(5) { z-index: 5; }

.icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 1px solid white;
}

如果需要更接近扇形展开的弧度效果，可以给每个头像容器添加轻微旋转属性，修改层级部分的代码即可：

.single-icon-container:nth-child(1) { 
  z-index: 1;
  transform: rotate(-8deg);
}
.single-icon-container:nth-child(2) { 
  z-index: 2;
  transform: rotate(-4deg);
}
.single-icon-container:nth-child(3) { 
  z-index: 3;
  transform: rotate(0deg);
}
.single-icon-container:nth-child(4) { 
  z-index: 4;
  transform: rotate(4deg);
}
.single-icon-container:nth-child(5) { 
  z-index: 5;
  transform: rotate(8deg);
}

你可以根据实际需求调整负边距数值、旋转角度，匹配想要的展示效果。

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