<div class="container">
<div class="avatar">
<div class="border"></div>
</div>
</div>
body {
background:#0d1316;
}
.container {
margin: 0 auto;
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
}
.avatar {
height: 100px;
width: 100px;
background:#325d74;
border-radius:50%;
position:absolute;
border:20px solid #0d1316;
}
.border {
content: "";
z-index:-2;
box-sizing: border-box;
position: absolute;
width: 180px;
height: 100px;
border-radius:0 0 90px 90px;
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
bottom: -40px;
left:-40px;
}
.avatar:before {
content: "";
box-sizing: border-box;
position: absolute;
border: 20px solid #0d1316;
width: 60px;
height: 30px;
left: 100px;
margin-left: 0;
top: 25px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom:none;
}
.avatar:after {
content: "";
box-sizing: border-box;
position: absolute;
border: 20px solid #0d1316;
width: 60px;
height: 30px;
left: -60px;
margin-left: 0;
top: 25px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom:none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.