title: CSS Triangle Grainy and Jagged in Chrome
body: <p>I have added a fiddle with the following code. I am trying to make an orange triangle with borders, but the border is showing jagged in Chrome. Does anyone have any insight? I have added the fiddle below. In a comment</p>
  
  <pre><code> &lt;div class="slideshow-overlay-wrapper cssNip"&gt;
  &lt;/div&gt;
  
  .cssNip {
    padding-bottom: 50px;
    position: relative;
  }
  
  .cssNip:before {
    border-left: 1000px solid #fff;
    border-right: 75px solid transparent;
    right: 50%;
  }
  
  .cssNip:after {
    border-left: 75px solid transparent;
    border-right: 1000px solid #fff;
    left: 50%;
  }
  
  .cssNip:after, .cssNip:before {
    border-bottom: 50px solid #fff;
    bottom: 0;
    content: "";
    position: absolute;
    width: 50%;
    z-index: 100;
  }
  .slideshow-overlay-wrapper {
      display: table;
      width: 100%;
      table-layout: fixed;
      border: none;
      background-color: #cb751b;
      margin-top: -1px;
      padding-top: 12px;
  }
  </code></pre>