html – SVG三角分隔符与图像背景

好吧,我正在尝试创建一个SVG部分分隔符.它的工作方式如下：

<section id="section1">
</section>
<svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
  <path d="M0 0 L50 100 L100 0 Z" />
</svg>
<section id="section2">
</section>

到现在为止还挺好.但是现在,我想在section1中添加一个背景,包括SVG“pick”,例如：

我所完成的只是(结果非常糟糕)：

添加一个

background: url(img)

对元素

和：

只是将BG添加到section1

解决方法

下面是使用与示例相同的代码的方法,但svg路径更改为倒三角形并且绝对定位到该部分的底部：

#section1{
  position:relative;
  background:url('http://i.imgur.com/k8BtMvj.jpg');
  background-size:cover;
  height:200px;
}
svg{
  position:absolute;
  bottom:-10px; left:0;
  width:100%; height:100px;
  display:block;
}

<section id="section1">
  <svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
    <path d="M0 0 L50 90 L100 0 V100 H0" fill="#2A80B9" />
  </svg>
</section>