-1

I'm going to create an avatar like this picture. how can I do this with css? avatar with a status circle

moshfiqrony
  • 4,303
  • 2
  • 20
  • 29
lashtirsirik
  • 31
  • 4
  • You should add [minimal reproducible code](https://stackoverflow.com/help/minimal-reproducible-example) – DecPK Sep 13 '21 at 05:31
  • Please add what your current state is. Like say for example you added an image set width, height but it is not rounded. So give the minimal code – moshfiqrony Sep 13 '21 at 05:34

3 Answers3

4

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>
PHP Geek
  • 3,949
  • 1
  • 16
  • 32
0

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).

Benjamonster
  • 39
  • 5
-1

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>
Noob Science
  • 50
  • 7