CSS
*, *:before, *:after {
box-sizing: border-box;
}
html{
background: radial-gradient(ellipse at top, #fa9cbf 0%, #f873a4 30%, #ca366e 100%);
height: 100%;
width: 100%;
}
body {
width: 300px;
height: 300px;
background: radial-gradient(ellipse at top, #fff 60%,#bbb 100%);
border-radius: 40px;
padding: 50px;
margin: 200px auto;
box-shadow: 0 20px 30px 0 rgba(0,0,0,0.3);
}
.dribbble{
background: #ef5b93;
height: 200px;
width: 200px;
margin: 0 auto;
border: 12px solid #c5376d;
border-radius: 100%;
overflow: hidden;
position: relative;
box-shadow:
inset -40px -140px 0 -42px #ef5b93,
inset -40px -140px 0 -30px #c5376d;}
.dribbble:before,
.dribbble:after{
content:'';
display: block;
border: 12px solid #c5376d;
border-radius: 100%;
width: 256px;
height: inherit;
background: transparent;
position: absolute;
}
.dribbble:before{
top: 80px;
left: 10px;
}
.dribbble:after{
top: -20px;
left: -130px;
height: 500px;
}
