Need help to get CSS for below sample image. Where, the alphabet within the circle part is a div and the subscript Z is an image(a circle image)

.text-center {
  text-align: center;
}

*,
::before,
::after {
  margin: 0px;
  background-repeat: no-repeat;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.img-circle.small-avatar {
  background: linear-gradient(rgb(106, 108, 111) 0%, rgb(38, 39, 41) 100%);
  height: 40px;
  width: 40px;
  color: rgb(255, 255, 255);
  font-size: 14px;
  font-family: arial;
  padding: 11px 0px;
  margin-top: 5px;
}

.img-circle {
  border-radius: 50%;
}

<div class="text-center">
  <div class="img-circle small-avatar center-block">
    <p align="center">D</p>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Something like this?

.text-center {
  text-align: center;
}

*,
::before,
::after {
  margin: 0px;
  background-repeat: no-repeat;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.img-circle.small-avatar {
  background: linear-gradient(rgb(106, 108, 111) 0%, rgb(38, 39, 41) 100%);
  height: 40px;
  width: 40px;
  color: rgb(255, 255, 255);
  font-size: 14px;
  font-family: arial;
  padding: 11px 0px;
  margin-top: 5px;
}

.img-circle {
  border-radius: 50%;
}

.rounded {
  border-radius: 5px;
  width: 20px;
  background-color: rgb(221, 160, 221);
  position:absolute; top:35px;
  margin-left:30px;
}

<div class="text-center">
  <div class="img-circle small-avatar center-block">
    <p align="center">D</p>
  </div>
  <div class="rounded">
    <p align="center">Z</p>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>