title: CSS triangle border using :after pseudo selector rendering bug
body: <p>In Firefox and IE when I use CSS border triangle solution with the <code>:after</code> pseudo selector the border looks frayed. See this image for a comparison:</p>
  
  <p><img src="https://i.stack.imgur.com/E2Yqh.png" alt="WebKit"><br>
  <img src="https://i.stack.imgur.com/BGzWW.png" alt="triangle renderings"></p>
  
  <p>This is from Chrome and Firefox. The relevant code is as follows:</p>
  
  <pre><code>li.active::after {
     content: "";
     width: 0;
     height: 0;
     position: absolute;
     bottom: -8px;
     left: 40%;
     border-style: solid;
     border-width: 8px 10px 0 10px;
     border-color: #FFF200 transparent transparent transparent;
  }
  </code></pre>