title: How do I make a CSS triangle with smooth edges?
body: <p>I have a triangle (<a href="http://jsfiddle.net/kirkaracha/TMP7H/1/" rel="noreferrer">JSFiddle</a>) using this CSS:</p>
  
  <pre><code>.triangle {
      width: 0;
      height: 0;
      border-top: 0;
      border-bottom: 30px solid #666699;
      border-left: 20px solid transparent; 
      border-right: 20px solid transparent;
      }
  </code></pre>
  
  <p>And this HTML:</p>
  
  <pre><code>&lt;div class="triangle"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This makes a triangle, but the diagonal lines are jagged and pixelated. How can I make them smooth? (I was able to smooth them out in Safari and Chrome by making them dotted, but that broke the triangles in Firefox and IE.)</p>