title: Filling up remaining space in svg
body: <p>I tried to create an svg and adding path to it.</p>
  
  <p>Here is my <a href="http://jsfiddle.net/adityasingh773/ppxzfpLa/" rel="nofollow">jsfiddle</a></p>
  
  <p>Now, as you can see, I managed to create a down facing triangle but what I am not able to do is filling up the rest of the space(white colored) inside the svg with some other color(say black). How do I do that?</p>
  
  <p>Here is my <strong>HTML</strong></p>
  
  <pre><code>&lt;svg id="bigTriangleColors" width="100%" height="100" 
  viewBox="0 0 100 102" preserveAspectRatio="none"&gt;
    &lt;path d="M0 0 L50 100 L100 0 Z"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>and <strong>CSS</strong></p>
  
  <pre><code>#bigTriangleColors {
  fill: #E1EAEF;
  position: relative;
  }
  svg:not(:root) {
  overflow: hidden;
  }
  </code></pre>
  
  <p>Thank you for your help!</p>