如何在 Ionic 7 中使用 Avatar 实现带右下角装饰色块的头像组件

✅ 推荐 HTML 结构（简洁可靠）

<ion-avatar class="avatar-with-corner">
  <img 
    alt="Equipment avatar" 
    src="/assets/avatar-equipment.png" />
  <div class="corner-indicator"></div>
</ion-avatar>

✅ 对应 SCSS 实现（兼容 Ionic 7+）

.avatar-with-corner {
  position: relative; // 必须！为子元素提供定位基准
  width: 88px;
  height: 88px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px; // 与 avatar 视觉一致
  }

  .corner-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 32px 32px; // 控制三角大小（高=宽×√2≈32px）
    border-color: transparent transparent #00AB9A transparent;
    transform: translate(50%, 50%); // 精准右下角对齐（避免像素偏移）
  }
}

? 关键细节说明：

企奶奶

一款专注于企业信息查询的智能大模型，企奶奶查企业，像聊天一样简单。

下载

• transform: translate(50%, 50%) 比 top: -53px 更鲁棒，不受字体渲染或缩放影响；
• border-width 中 32px 是推荐值（对应视觉上约 22×22px 的等腰直角三角），可根据设计稿微调；
• border-color 顺序必须为 transparent transparent #00AB9A transparent，对应「上 右 下 左」，确保三角朝向右下；
• 不建议修改 ion-avatar 的 --border-radius 后再用 ::after，因 Ionic 7 的 Shadow DOM 阻断了外部样式穿透。

⚠️ 注意事项

• ❌ 避免在 ion-avatar 上直接写 ::after —— Ionic 7 的 Shadow DOM 会屏蔽外部样式；
• ❌ 不要将 .corner-indicator 放在 img 外层 div 中（如问题中
  ），这会破坏 ion-avatar 的默认布局逻辑；
• ✅ 如需复用性强，建议封装为 Angular 自定义组件（如 AvatarWithCornerComponent），接收 src 和 color 输入属性；
• ✅ 若需响应式适配，可结合 CSS 自定义属性（如 --corner-size: 32px）动态控制三角尺寸。

✅ 最终效果验证要点

• 三角块始终紧贴头像右下角，不随滚动/缩放偏移；
• 背景色 #00AB9A 清晰锐利，无锯齿（CSS border 三角在现代浏览器中渲染质量优秀）；
• 在 iOS / Android / Web 各平台表现一致，无 Ionic 特定兼容性问题。

通过该方案，你无需引入额外图标库或 Canvas 绘制，仅用标准 CSS 即可实现专业级头像装饰效果，兼顾性能、可维护性与跨平台一致性。