html - css html flex 的标题

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