I would've certainly closed your question as it lacks the efforts by you but as you said that you don't know how to achieve that at all, so thought to post my solution here...
You can use CSS floats along with border-radius
to achieve that...
Explanation: Here, I am using border-radius
for the element curves, and using negative margin
for the bands to hide behind the circle ...
Now this solution may not be useful if you are having some background as am using 20px
white border around the circle...
HTML
<div class="wrap">
<div class="circle"></div>
<div class="band_wrap clear">
<div class="band"></div>
<div class="band"></div>
</div>
</div>
CSS
.wrap {
position: relative;
width: 390px;
}
.wrap > div.circle {
height: 150px;
width: 150px;
border: 20px solid #fff;
border-radius: 50%;
background: #aaa;
float: left;
z-index: 1;
position: relative;
}
.band_wrap {
position: relative;
top: 20px;
}
.wrap .band {
height: 50px;
background: #aaa;
width: 200px;
border-radius: 0 20px 20px 0;
float: left;
margin-top: 15px;
margin-left: -20px;
}
.clear:after {
clear: both;
display: table;
content: "";
}