时间戳

首页 > 解决方案 > 如何使用css创建带有状态圈的圈子头像？

html - 如何使用css创建带有状态圈的圈子头像？

问题描述

我将创建一个像这张图片一样的头像。我怎么能用css做到这一点？ 带有状态圈的头像

标签： htmlcss

解决方案

您可以执行以下操作：

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

推荐阅读