Como faço um triângulo CSS com arestas suaves?

Question

Sep 13, 2011, 12:42 AM

Como faço um triângulo CSS com arestas suaves?

Tenho um triângulo JSFiddle) usando este CSS:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    }

E este HTML:

<div class="triangle"></div>

Isso cria um triângulo, mas as linhas diagonais são irregulares e pixelizadas. Como posso torná-los suaves? (Consegui suavizá-los no Safari e Chrome, tornando-os pontilhados, mas isso quebrou os triângulos no Firefox e no IE.)