能否用CSS实现类似WhatsApp状态的分段环形进度边框？

核心思路 #

WhatsApp的分段环形进度本质是多个独立的带圆角弧形段，每个段对应一个故事，已查看段显示浅灰色，未查看段显示主题色。实现关键：

• 用多个元素模拟每个弧形段，通过transform: rotate()排列成环形
• 给每个段的首尾添加与环形厚度一致的圆角
• 通过CSS类切换已查看/未查看状态的颜色

代码示例 #

HTML结构 #

<!-- 示例：5个故事，已查看2个 -->
<div class="stories-ring">
  <div class="story-segment viewed" style="--angle: 72deg; --rotate: 0deg;"></div>
  <div class="story-segment viewed" style="--angle: 72deg; --rotate: 72deg;"></div>
  <div class="story-segment" style="--angle: 72deg; --rotate: 144deg;"></div>
  <div class="story-segment" style="--angle: 72deg; --rotate: 216deg;"></div>
  <div class="story-segment" style="--angle: 72deg; --rotate: 288deg;"></div>
</div>

CSS样式 #

.stories-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  background: #fff; /* 背景色按需调整 */
}

.story-segment {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 裁剪出单个分段的弧形区域 */
  clip-path: polygon(
    50% 50%,
    50% 0%,
    calc(50% + 50% * sin(var(--angle))) calc(50% - 50% * cos(var(--angle))),
    50% 100%
  );
  transform: rotate(var(--rotate));
  overflow: hidden;
}

/* 绘制弧形段的主体 */
.story-segment::before {
  content: "";
  position: absolute;
  top: 4px; /* 环形厚度的一半，总厚度8px */
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 50%;
  background: conic-gradient(
    #25d366 0deg, /* 未查看状态主题色，可替换 */
    #25d366 var(--angle),
    transparent var(--angle)
  );
}

/* 已查看状态的灰色样式 */
.story-segment.viewed::before {
  background: conic-gradient(
    #ddd 0deg,
    #ddd var(--angle),
    transparent var(--angle)
  );
}

/* 添加分段首尾的圆角 */
.story-segment::after {
  content: "";
  position: absolute;
  width: 8px; /* 与环形厚度一致 */
  height: 8px;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--segment-color, #25d366);
}

.story-segment.viewed::after {
  --segment-color: #ddd;
}

关键参数说明 #

• --angle：单个分段占据的角度，计算公式为 360 / 总故事数（示例5个故事，每个72度）
• --rotate：每个分段的旋转角度，依次递增--angle的值
• 环形厚度通过::before的top/left/right/bottom控制，圆角大小与厚度保持一致

实际开发中，可通过JS动态生成.story-segment元素，根据已查看数量自动添加viewed类。

相关MDN文档参考 #

• CSS 图像模块 Level 3：conic-gradient() 函数
• CSS 形状模块 Level 1：clip-path 属性
• CSS 变换模块 Level 1：transform 属性

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