html - 将svg放置在全屏图像div的底部

我试图将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的底部，但是没有一种方法适合我。

结果：

最佳答案

您应该将.second-content设置为相对
然后将{position: absolute}添加到其他两个元素。
然后在第一个添加{top: 0}，在另一个{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>