HTML CSS - 弯曲的div布局和SVG重叠问题

Question

我已经获得了设计开发和设计使用了大量的圆形布局项目，我不知道如何解决这个问题，我尝试过使用SVG，PNG等但是它＆＃ 39;不打球。

例如，设计的这一部分看起来像这样

但是当我尝试使用SVG时，我最终得到了这个

那个^显示一个灰色背景和上面的部分是一个SVG，它有一个灰色的底部和绿色的线穿过它，我尝试使用SVG，顶部为白色，底部为灰色，并且穿过中间的那条绿线，但是当我试图复制设计时，我遇到了SVG没有图像的问题所以它会切断你所看到的。以下是我的代码示例：

HTML：

<img src="img/line-05.svg" class="svg" />
<section class="bgYellowGrey">
    <div class="column two">
        <div class="numWrapper"><p class="number">2</p></div>
        <h2>Title</h2>
        <h3>Subtitle</h3>
        <p>Paragraph text</p>
    </div>
    <div class="column two">
        <img id="image-03" src="img/third-image.png" />
    </div>
</section>

CSS（相关）：

section{
    position: relative;
    float: left;
}
.column{
    float: left;
}
.two{
    padding: 10px 2%;
    width: 46%;
}
#image-03{
    margin-top: -150px;
}
.svg{
    position: relative;
    width: 100%;
    z-index: 99999;
}

有问题的SVG是这个（插图画家截图）：

遗憾的是，该设计完全基于此布局。有没有其他惯例或简单的方法来复制设计？我想我只需要找到一种方法来剪辑成div / svg？任何帮助将不胜感激。

这可能很难解释，但请告诉我进一步解释比特，我会。