How to create desired shapes and position them accordingly using CSS, CSS3?

Question

Below is the image which shows the design that I want to display in one of my page,

I'm more of a developer than a designer so designing as shown above is quite of a higher level to me. So any suggestions or tips on how to achieve the above task? (Examples through jsfiddle or any such platform would be extremely helpful ;) )

Answer 1

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...

Demo

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: "";
}