title: position a svg at the bottom of full screen image div
body: <p>I am trying to position an svg separator at bottom part of an image <code>div</code>.
  Here is css for the latter:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Here is the relevant html part:</p>
  
  <pre><code>&lt;div class="second-content"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"&gt;
          &lt;path stroke="white" fill="white" d="M0 0 L70 100 L100 0 Z" /&gt;
          &lt;path stroke="#f4f4f4" fill="#f4f4f4" d="M70 100 L100 40 L100 0 Z" /&gt;
      &lt;/svg&gt;
      &lt;svg  xmlns="http://www.w3.org/2000/svg" width="100%" style="bottom:0" height="100"  viewBox="0 0 100 100" preserveAspectRatio="none"&gt;
          &lt;path stroke="white" fill="white" d="M0 100 L30 0 L100 100 Z" /&gt;
          &lt;path stroke="#f4f4f4" fill="#f4f4f4" d="M30 0 L100 40 L100 100 Z" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried some ways to fix the content at the bottom of the div but none of them worked for me.</p>
  
  <p>Result:
  <a href="https://i.stack.imgur.com/TjVOk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TjVOk.jpg" alt="enter image description here"></a></p>