Как сделать CSS-треугольник с гладкими краями?

У меня есть треугольник (JSFiddle), использующий этот CSS:

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

И этот HTML:

Из него получается треугольник, но диагональные линии имеют зазубрины и пикселированы. Как сделать их сглаженными? (Я смог сгладить их в Safari и Chrome, сделав пунктирными, но это сломало треугольники в Firefox и IE)