Ionic 7中如何使用SCSS实现如图所示的自定义Avatar样式？

你现有代码存在几个关键问题，导致伪元素无法正常显示：

1. 伪元素选择器错误：嵌套写法ion-avatar ion-avatar::after无法正确选中目标元素的伪元素
2. 伪元素缺少content属性：::before/::after必须设置content（哪怕是空值）才能被渲染
3. 未设置伪元素定位：没有定位的伪元素无法精准控制位置

以下是修正后的完整实现代码：

HTML 代码 #

<ion-avatar class="custom-avatar">
  <img alt="avatar" src="/assets/avatar-equipment.png"/>
</ion-avatar>

（无需额外嵌套div，ion-avatar可直接包裹img元素）

SCSS 代码 #

.custom-avatar {
  --border-radius: 4px;
  position: relative; /* 设置为相对定位，作为伪元素的定位容器 */
  width: 88px;
  height: 88px;
  top: 12px;

  &::after {
    content: ''; /* 必须添加，伪元素才能被渲染 */
    position: absolute; /* 绝对定位，相对于父元素调整位置 */
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid #00AB9A;
    transform: rotate(45deg); /* 按需调整三角方向 */
    z-index: 1; /* 让伪元素处于图片下方，避免遮挡 */
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填充整个avatar容器 */
    position: relative;
    z-index: 2; /* 让图片显示在伪元素上方 */
  }
}

关键调整说明： #

• 将ion-avatar设为position: relative，确保伪元素可以相对于它定位
• 使用SCSS嵌套语法&::after正确选中目标伪元素
• 通过bottom/right属性调整三角的位置，修改border尺寸可调整三角大小
• 利用z-index控制图片和伪元素的层级关系，避免图片被遮挡

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