Как добавить точечный маркер на аватаре в HTML?

Question

Я хочу добавить маркер синего цвета в правом нижнем углу аватара img, результат должен выглядеть примерно так, как показано ниже.

<avatar>
    <img [src]="item.profilepic"/>
</avatar>

Возможно ли это сделать в HTML?

Answer 1

Да, это возможно. Вы можете сделать это так:

.avatar {
    height: 256px;
    width: 256px;
    position: absolute;
}
.dot {
    height: 25px;
    width: 25px;
    border-radius: 100%;
    background: blue;
    position: absolute;
    right: 25px;
    bottom: 25px;
}

<div class="avatar">
    <img src="http://aux2.iconspalace.com/uploads/smile-icon-256.png">
    <div class="dot"></div>
</div>

С тегами Ioni c это выглядит так:

HTML

<ion-avatar>
    <img src="http://aux2.iconspalace.com/uploads/smile-icon-256.png"/>
    <div class="dot"></div>
</ion-avatar>

CSS

ion-avatar {
  height: 256px;
  width: 256px;
  position: absolute;
}
.dot {
  height: 25px;
  width: 25px;
  border-radius: 100%;
  background: blue;
  position: absolute;
  right: 25px;
  bottom: 25px;
}