title: Crop triangle from image in CSS
body: <p>Our designer wants to do that:</p>
  
  <p><img src="https://i.stack.imgur.com/a99c9m.png" alt="crop"></p>
  
  <p>But I can't figure out a good way to do this triangle crop:</p>
  
  <ul>
  <li>With an <code>:after</code> that takes all the width and uses some kind of borders trick to make a triangle</li>
  <li>With a big <code>:after</code> element that is rotated and white, but it should not hide any other text</li>
  <li>With some magic filter I don't know?</li>
  <li>By using a canvas, cropping it in JS, then loading the image as a base64 url? (Maybe overkill :D)</li>
  </ul>
  
  <p>What do you think?</p>