如何使用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>