CSS HTML弯曲标题

Question

I am wondering if anyone can point me in the right direction/or the best method of placing the following image as a header. I am not a web programmer so i am winging this.

https://www.dropbox.com/s/x8385g42806yisv/man-with-flag.png?dl=0

not sure, if the image should be slices in two, to make one rectangle and the other the one with the curve

or make the image rectangular, and apply CSS

there will be three section below the image, so idealy the section below should transition seamlessly.

Answer 1

Similar to this http://jsfiddle.net/lotusgodkk/7fjSc/1006/ ?

CSS:

.a {
    position: relative;
    height: 70px;
    width: 600px;
    background: #182F5B;
}
.a:before, .a:after {
    content:"";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
}
.a:before {
    width: 340px;
    height: 80px;
    background-color: #FFFFFF;
    right: -5px;
    top: 40px;
}
.a:after {
    width: 300px;
    height: 70px;
    background-color: #182F5B;
    left: 0;
    top: 27px;
}

HTML :

<div class="a" /><div/>