Html CSS：在图像上添加徽章以查看联机/脱机状态

如何向现有图像添加徽章以查看联机/脱机状态？ 请看这里的一个例子。在右角有一个灰点。。。 我该怎么做

---

非常感谢

将图标放在一个div中，该div将保存图标和状态元素，如下所示

.icon容器{
宽度：50px；
高度：50px；
位置：相对位置；
}
img{
身高：100%；
宽度：100%；
边界半径：50%；
}
.地位圈{
宽度：15px；
高度：15px；
边界半径：50%；
背景颜色：灰色；
边框：2倍纯白；
底部：0；
右：0；
位置：绝对位置；
}

---

到目前为止，您尝试了什么？你能给我一些密码吗？