全画面イメージの下に位置するdivを

Question

イメージの下の部分にsvgセパレータを配置しようとしていますdiv。ここ は後者のCSSです：ここで

.second-content { 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-color: #999; 
    height: 100%; 
    background-image: url("https://us-east.manta.joyent.com/condenast/public/cnt-services/production/2015/08/25/55dc9569f073f4db64845993_eiffel-tower-paris.jpg"); 
    background-color: #cccccc; 
} 

は、関連するHTMLの一部です：

<div class="second-content"> 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> 
     <path stroke="white" fill="white" d="M0 0 L70 100 L100 0 Z" /> 
     <path stroke="#f4f4f4" fill="#f4f4f4" d="M70 100 L100 40 L100 0 Z" /> 
    </svg> 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" style="bottom:0" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> 
     <path stroke="white" fill="white" d="M0 100 L30 0 L100 100 Z" /> 
     <path stroke="#f4f4f4" fill="#f4f4f4" d="M30 0 L100 40 L100 100 Z" /> 
    </svg> 
</div> 

私はdiv要素の下部に内容を修正する方法をいくつか試してみたが、それらのどれも働いていません私のために。

結果：

Answer 1

あなたは相対 として.second-contentを設定し、他の二つの要素に{position: absolute}を追加する必要があります。 そして、最初のものは{top: 0}を追加すると、あなたも「灰色の線」を削除するには-1pxの代わりに、ゼロとして設定することができ、他の{bottom: 0}

body,html,.second-content {height: 100%; margin: 0} 
 
.second-content { 
 
    background-color: #cccccc; 
 
    position: relative 
 
} 
 
.second-content svg:first-child, 
 
.second-content svg:last-child { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.second-content svg:last-child { 
 
    top: auto; 
 
    bottom: 0; 
 
}

<div class="second-content" style="background-color: #369"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
     <path stroke="white" fill="white" d="M0 0 L70 100 L100 0 Z" /> 
 
     <path stroke="#f4f4f4" fill="#f4f4f4" d="M70 100 L100 40 L100 0 Z" /> 
 
    </svg> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" style="bottom:0" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
     <path stroke="white" fill="white" d="M0 100 L30 0 L100 100 Z" /> 
 
     <path stroke="#f4f4f4" fill="#f4f4f4" d="M30 0 L100 40 L100 100 Z" /> 
 
    </svg> 
 
</div> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<div class="second-content" style="background-color: #396"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
     <path stroke="white" fill="white" d="M0 0 L70 100 L100 0 Z" /> 
 
     <path stroke="#f4f4f4" fill="#f4f4f4" d="M70 100 L100 40 L100 0 Z" /> 
 
    </svg> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" style="bottom:0" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
     <path stroke="white" fill="white" d="M0 100 L30 0 L100 100 Z" /> 
 
     <path stroke="#f4f4f4" fill="#f4f4f4" d="M30 0 L100 40 L100 100 Z" /> 
 
    </svg> 
 
</div>