title: Cutting image diagonally with CSS
body: <p><strong>How to cut away part of an image or container diagonally using CSS?</strong></p>
  
  <p>The part that needs to be cut away has the form of a triangle</p>
  
  <p><img src="https://i.stack.imgur.com/1fiZ2.png" alt="Example of image"></p>
  
  <p>To be more specific: if the above picture is the image the blue part should be cut out, not the yellow</p>
  
  <p>The html should be:</p>
  
  <pre><code>&lt;figure&gt;
   &lt;img src="img_pulpit.jpg" alt="The Pulpit Rock"&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>&lt;div class="container"&gt;
    content
  &lt;/div&gt;
  </code></pre>
  
  <p>There is from my own investigation a lot of ways to do this, but most of them is hacky, so looking for a best approach</p>
  
  <p>Min browser support: IE11, latest webkits etc.</p>