将svg放在全屏图像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}和另一个{bottom: 0}

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;