CSS HTML弯曲标题

Question

我想知道是否有人可以向我指出正确的方向/或将以下图像作为标题的最佳方法。 我不是网络程序员，所以我对此表示欢迎。

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

不确定，如果图像应一分为二，则制作一个矩形，另一个制作成带曲线的矩形

或将图片设为矩形，然后应用CSS

在图片下方将有三个部分，因此理想情况下，下面的部分应无缝过渡。

Answer 1

与此类似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/>