title: CSS > Triangle corner transparent mask
body: <p>Okay there is a little tricky question.
  I already know and frequently use CSS triangle to achieve different layouts but this time the triangle should act a bit like a mask. It must have transparent half and it absolutely need to mask the parent background color.</p>
  
  <p>There is a picture of what I wan't to achieve on different level. My designer used this almost everywhere and I need to find a reliable, yet flexible way to do it.
  <a href="http://i.stack.imgur.com/T7mck.jpg" rel="nofollow">(click to see screenshot) transparent triangle</a></p>
  
  <p>There is how I would traditionnaly do it</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
    position:relative;display:block;
    width:280px;height:140px;
    background-color:#000;
    padding:15px 15px;
  }
  
  .box.angled:after{
    border-color:#000000 #ffffff transparent transparent;
    border-width:50px 50px 0 0;
    border-style:solid;
    
    position:absolute;display:block;
    width:0;height:0;
    right:0;bottom:0;
    content:' ';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box angled"&gt;
    blah blah blah
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Yay, working right? Well, no. Change white border color to transparent and now you only see its parent black background-color.</p>
  
  <p>Now, I know there is probably a way with a mask but most of the time it isn't very well compatible even on a modern firefox 42+ or internet explorer 10.</p>
  
  <p>So as I said, is there any flexible and reliable way to do it in many different situation (flat background, image background, variable parent width / height...)</p>
  
  <p><strong>2016-07-13 EDIT :</strong> found a solution if someone has the same question, view my answer below.</p>