title: CSS Triangle + "After" Implementation
body: <p>I have tried to create a triangle with CSS and it looks good, however I have now got a problem implementing it after a box.</p>
  <p>Check out my example and you will see what I mean:</p>
  <p><a href="https://jsfiddle.net/TTVuS/" rel="nofollow noreferrer">https://jsfiddle.net/TTVuS/</a></p>
  <p>It seems like the triangle after <code>.box</code> gets &quot;cut off&quot; and I have absolutely no idea why this happens.</p>
  <p>I want it to look like <code>.arrow</code>.</p>
  <p>I have tried to change dimensions of the box, the triangle etc. but nothing worked.</p>
  <p>p.s. here is the css in case Jsfiddle is slow or not available again:</p>
  <pre><code>.box{
      background:red;
      height:40px;
      width:100px;
  }
  
  /*the triangle but its being cut off*/
  .box:after{
      content:&quot;&quot;;
      width:0;
      height:0;
      border-top:20px solid transparent;
      border-bottom:20px solid transparent;
      border-left:20px solid green;
  }
  
  /*the triangle how it should look like*/
  .arrow{
      width:0;
      height:0;
      border-top:20px solid transparent;
      border-bottom:20px solid transparent;
      border-left:20px solid green;
  }
  </code></pre>