How to create circle avatar with a status circle using css? [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm going to create an avatar like this picture. how can I do this with css?
avatar with a status circle

Answer 1

You can do like the following :
.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

The "border-radius" property is what you want to make the image a circle.
Like this:
#circleProfilePicture
{
width:175px;
height:175px;
position:absolute;
overflow:hidden;
border-radius:50%;
}
For the status circle, I assume you want a regular circle element that you change the color of based on some user status?
You'll need a way to check the status and generate a different page/change the element background depending (if this is all done client side, use JavaScript).
var userStatus = "online";
var circ = document.getElementById( 'div_IWantToChangeColorOf' );
if(userStatus == "online"){
circ.style.backgroundColor = 'green';
} else
{
circ.style.backgroundColor = 'red';
}
If this is more meaningful, like their login status according to the server, you'll need a server side language to generate the page with the appropriate element color.
In PHP you'd do something like this to set the color:
PHP: Change color of text based on $value
and then generate the appropriate page (with modified color circle) to send to the user using the color value you determined based off the user status.
So, use the border-radius property to make the image a circle, and to create a circular div on top of that. Then, once you figure out what "status" you're talking about, change the color using Javascript (on client) or PHP (on server).

Answer 3

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>