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内容{高度：100%；边距：0}
.第二部分内容{
背景色：#中交；
职位：相对
}
.第二个内容svg：第一个孩子，
.第二个内容svg：最后一个子{
位置：绝对位置；
排名：0；
左：0；
}
.第二个内容svg：最后一个子{
顶部：自动；
底部：0；
}

您甚至可以将“灰线”设置为-1px而不是零