Beautiful goldish avatar using only one element

HTML

For HTML, we need only one div element with class "avatar".

        <div class="avatar"></div>
      

CSS

For CSS, first we'll style the "avatar" class. We'll set width and height of 100x100 pixels with border set to 10px goldish solid. I'll just set a background image that I found on google and set the size to cover. To form a circle, simply set border-radius property to 50%. Lastly, we'll set position to relative.

        .avatar {
            width: 100px;
            height: 100px;
            border: 10px solid #d0ab35;
            background-image: url('https://dl.memuplay.com/new_market/img/com.vicman.newprofilepic.icon.2022-06-07-21-33-07.png');
            background-size: cover;
            border-radius: 50%;
            position: relative;
        }
      

Now we'll style the before pseudo element. We'll set content and position to absolute with top, bottom, left and right set to -16 pixels. This means that this element will be by 16 pixels larger on all sides that the div "avatar" element. We'll set border radius to 50% to form a circle. Now we'll set background image to linear gradient with some beautiful golden colors. Using clip-path property, we'll create cut two squares, one on top and one on the right side. By setting z-index property to -1, this element will go beneath the "avatar" div element, and it will look like a 16 pixels wide border.

        .avatar:before {
            content: "";
            position: absolute;
            top: -16px;
            bottom: -16px;
            left: -16px;
            right: -16px;
            border-radius: 50%;
            background-image: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
            clip-path: polygon(54% 0, 53% 5%, 59% 6%, 61% 0, 100% 0, 100% 60%, 94% 58%, 91% 67%, 100% 70%, 100% 100%, 0 100%, 0 0);
            z-index: -1;
        }
      

Now we'll style the after pseudo element. We'll set content and position to absolute with top, bottom, left and right set to -11 pixels. This means that this element will be larger that 11 pixels on all sides that "avatar" div element, and 5 pixels smaller that the before pseudo element. We'll just set solid white border to 4 pixels with radius of 50% to form a circle.

        .avatar:after {
            content: "";
            position: absolute;
            top: -11px;
            bottom: -11px;
            left: -11px;
            right: -11px;
            border: 4px solid #fff;
            border-radius: 50%;
        }
      

And that's it.

Checkout in playground

Video tutorial

Whole code

<div class="avatar"></div>

<style>
.avatar {
  width: 100px;
  height: 100px;
  border: 10px solid #d0ab35;
  background-image: url('https://dl.memuplay.com/new_market/img/com.vicman.newprofilepic.icon.2022-06-07-21-33-07.png');
  background-size: cover;
  border-radius: 50%;
  position: relative;
}
.avatar:before {
  content: "";
  position: absolute;
  top: -16px;
  bottom: -16px;
  left: -16px;
  right: -16px;
  border-radius: 50%;
  background-image: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
  clip-path: polygon(54% 0, 53% 5%, 59% 6%, 61% 0, 100% 0, 100% 60%, 94% 58%, 91% 67%, 100% 70%, 100% 100%, 0 100%, 0 0);
  z-index: -1;
}
.avatar:after {
  content: "";
  position: absolute;
  top: -11px;
  bottom: -11px;
  left: -11px;
  right: -11px;
  border: 4px solid #fff;
  border-radius: 50%;
}
</style>
      

Thank you for reading this article.

More avatars

Read more

Read more

Similar

Read more

Read more

Read more

See also

Read more