＆＃34;棒＆＃34; svg到元素的顶部，因为它正在调整大小

Question

我试图添加一个时尚的波浪＆＃34; div的顶部元素，但是在我的尝试中，svg从其位置移动并在浏览器调整大小时留下间隙。

这是一个应该是什么样子的模型：

CSS：

.wave {
  position: absolute;
  top: -72px;
}

.container {
  background: #eee;
}

.col-1 {
  height: 200px;
}

.col-2 {
  position: relative;
  background: #fff;
  height: 100px;
  width: 100%;
  margin-top: 100px;
}

我的其他尝试是在background-image: url(wave.svg);选择器中使用:after，但结果相同。

这是一个代码笔：

https://codepen.io/anon/pen/LmRyLK

我怎样才能让wave在调整大小时保持不变？什么时候没有？

Answer 1

将SVG设置为背景图像，在您拥有时髦紫色位的元素上，您可以将背景图像叠加在一起，如下所示：

.purpleElement{
    background: url("/path/to/asset/image.svg") bottom center no-repeat, purple;
    background-size: 100%;

    /*I've set a height here to replicate content*/
    height: 70vh;
    width: 100%;
}

I've forked off your codepen to show what will happen