好吧,我正在尝试创建一个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>
