如何实现仅显示80%边框的圆形图标容器？

下面给你两种可行的实现方案，直接替换你现有代码即可：

方案一：伪元素+裁剪 #

.icon-wrapper {
  position: relative;
  padding: $icon-padding;
  border-radius: 50%;
  overflow: hidden; /* 限制伪元素范围 */
}

.icon-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  border-radius: 50%;
  transform: rotate(72deg); /* 旋转调整缺口位置，72度对应20%的缺口 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 50%); /* 裁掉顶部20%区域 */
}

方案二：锥形渐变模拟边框 #

.icon-wrapper {
  position: relative;
  padding: $icon-padding;
  border-radius: 50%;
  border: 2px solid transparent; /* 透明边框占位 */
  background: conic-gradient(black 0deg 288deg, transparent 288deg 360deg); /* 288度=360*80% */
  background-origin: border-box;
  background-clip: content-box, border-box; /* 让渐变只显示在边框区域 */
}

简单说明 #

• 方案一：先通过伪元素生成完整圆框，再裁剪掉20%的区域，修改rotate的度数就能调整缺口的位置。
• 方案二：用锥形渐变直接绘制80%的边框部分，代码更简洁，调整渐变里的度数就能改变边框的占比。

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