title: compatibility issue in firefox, dynamic,absolute table content
body: <p>How to make this (<a href="http://jsbin.com/uxayid/3/" rel="nofollow noreferrer">http://jsbin.com/uxayid/3/</a>) work in firefox too?</p>
  
  <p>This is the css of the triangles:</p>
  
  <pre><code>#c table tr td {
      height: 295px;
      width: 208px;
      background-color: white;
      border: 1px solid black;
      position: relative;
      text-align: center;
  }
  .tr-topright {
      border-left-width: 42px;
      border-top-width: 42px;
      border-left-color: white;
      border-left-style: solid;
      border-top-color: #BBBBBB;
      border-top-style: solid;
      box-shadow: -3px 3px 6px 0 lightGrey;
      height: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: 0;
  }
  </code></pre>
  
  <p>The first one is the expected result.</p>
  
  <p><img src="https://i.stack.imgur.com/PMQU2.png" alt="chrome and firefox preview"></p>