title: Cut corner on div with image set to 100% height and width
body: <p>This is basically what i want to achieve --> <strong><a href="https://jsfiddle.net/tak1pyt7/1/" rel="nofollow">https://jsfiddle.net/tak1pyt7/1/</a></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.clip {
    width: 500px;
    height: 500px;
    -webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
  }
  body {
    background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
    height: 100%;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="clip"&gt;
      &lt;img src="http://lorempixel.com/600/600/" width="100%" height="100%" /&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Although i have a solution but there are various issues with the code in the fiddle as follows :</p>
  
  <ul>
  <li>It doesn't work in IE or Edge as clip path isn't supported</li>
  <li>Clip path doesn't support css shapes in firefox and if you need to make it work in firefox then you need to supply inline svg </li>
  <li>Tried supplying inline svg as well but it has it's own set of issues that doesn't solve my requirement. I need the cut dimensions to remain the same irrespective of the height and width of the container. With inline svg that cuts the image right now, it's dimension changes with change in height and width i.e. the cut is responsive. I need static dimensions of the cut.</li>
  </ul>
  
  <p>Other than above solution i searched a whole lot of solutions that might help me create div's with corners cut and the cut is transparent itself because i don't have a solid background at the back.</p>
  
  <p>Other solutions explored</p>
  
  <p><strong>Using CSS3 Gradients sample</strong></p>
  
  <ul>
  <li>Sample --> <strong><a href="http://jsfiddle.net/spdawson/3Tc8S/light/" rel="nofollow">http://jsfiddle.net/spdawson/3Tc8S/light/</a></strong></li>
  <li>Doesn't work when you have the content which occupies full height and width of the area such as the fiddle i provided at the beginning of the post.</li>
  </ul>
  
  <p><strong>Using CSS Borders</strong></p>
  
  <ul>
  <li><p>Sample --> <strong><a href="http://jsfiddle.net/spdawson/HhZQe/light/" rel="nofollow">http://jsfiddle.net/spdawson/HhZQe/light/</a></strong></p></li>
  <li><p>Doesn't work for me because The container on which the cut has to be made has to contain solid background color which is not the case for my design.</p></li>
  </ul>
  
  <p><strong>Using jQuery plugin (<a href="http://jquery.malsup.com/corner/" rel="nofollow">http://jquery.malsup.com/corner/</a>)</strong></p>
  
  <ul>
  <li><p>Sample code --> <a href="http://jsfiddle.net/spdawson/nxnCD/light/" rel="nofollow">http://jsfiddle.net/spdawson/nxnCD/light/</a></p></li>
  <li><p>You need to have solid background color which isn't the case considering my requirement. I have a image as a background instead.</p></li>
  </ul>
  
  <p><strong>A Solution that WORKS but is very HACKY</strong> </p>
  
  <ul>
  <li><p>Sample --> <a href="http://jsfiddle.net/26v7pfLb/" rel="nofollow">http://jsfiddle.net/26v7pfLb/</a></p></li>
  <li><p>I am using this solution right now for containers that have fixed height and width but i have a page in my app where the containers have a static width but dynamic height. In that case the hack would be pretty difficult to implement and it seems very weird to use this solution personally. </p></li>
  <li><p>I am trying to find something more elegant and clean to implement such a kind of solution in CSS</p></li>
  </ul>
  
  <p>Any pointers would be helpful. </p>