title: Place SVG in each corner of parent div with css?
body: <p>I have a div which contains some content, some days it might contain a lot other days almost none. One thing it has every day is 4 svg's corner, independent of the content the svg's should always be in the corners.</p>
  
  <p>My problem is that I cant get them to stay in the right place, when i give them the position absolute attribute they jump "out" of the div.</p>
  
  <p><a href="https://jsfiddle.net/8vfy0o5e/" rel="nofollow noreferrer">Here is an example easy to play around with</a></p>
  
  <p><strong>Here is a picture explaining the request</strong>
  <a href="https://i.stack.imgur.com/OY4wE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OY4wE.png" alt="Here is a picture explaining the request"></a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div style='background-color:#fffff0; text-align-last: center;'&gt;
    &lt;h1&gt;Photos&lt;/h1&gt;
    &lt;p&gt;preview&lt;/p&gt;
  
    &lt;svg class='svgCorner svgCornerTL' id='svg4' viewBox='0 0 150 150'&gt;               
      &lt;path id='path1' d='M0 150L150 150L0 0'/&gt;
    &lt;/svg&gt;
  
    &lt;svg class='svgCorner svgCornerTR' id='svg4' viewBox='0 0 150 150'&gt;               
      &lt;path id='path1' d='M0 150L150 150L0 0'/&gt;
    &lt;/svg&gt;
  
    &lt;svg class='svgCorner svgCornerBL' id='svg4' viewBox='0 0 150 150'&gt;               
      &lt;path id='path1' d='M0 150L150 150L0 0'/&gt;
    &lt;/svg&gt;
  
    &lt;svg class='svgCorner svgCornerBR' id='svg4' viewBox='0 0 150 150'&gt;               
      &lt;path id='path1' d='M0 150L150 150L0 0'/&gt;
    &lt;/svg&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css (incomplete/mistaken)</strong></p>
  
  <pre><code>.svgCorner {
    fill:  #ff0000;
    width: 7%;
  }
  
  .svgCornerBL{
  
  }
  
  .svgCornerBR{
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
  }
  
  .svgCornerTL{
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }
  
  .svgCornerTR{
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
  }
  </code></pre>