如何使用css创建一个状态圈圆圈头像?

Question

我要创建一个像这样的头像。我如何用css做到这一点?带状态圈的头像

Answer 1

您可以这样做:

.img-circle-small {
width: 53px;
height:55px;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
border: 2px solid #CCC;
margin-bottom: 2px;
}

.status{
width: 16px;
height:16px;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
border: 2px solid #CCC;
margin-bottom: 2px;
background-color: green;
position: absolute;
}
.temp{
position: relative;
display: inline-block;
}
.topRight{
top: 0;
right: 0;
}

<div class="temp">
<img src="https://www.pngitem.com/pimgs/m/206-2067982_thinking-boy-clipart-and-cliparts-for-free-transparent.png" alt="avatar" class="img-circle-small">
<span class="status topRight">&nbsp</span>
</div>

Answer 2

Try This

HTML

<img src="path_to/image" style="border-radius: 50%; width: 50px; height: 50px; border-width: 2%; border-style: solid; border-color: grey; ">
<span style="height: 12px; width: 12px; background-color: #bbb; border-radius: 50%; display:inline-grid; top: 0px;"></span>