Você pode não perceber, mas transparenté definido como rgba(0, 0, 0, 0)-transparent preto . Em navegadores WebKit sem anti-aliasing (acredito que eles estão finalmente no processo de retificar essa omissão), isso não importa. No entanto, em navegadores com anti-aliasing de bordas diagonais (IE9 + e Firefox), isso pode ter implicações sérias.
O IE9 faz coisas complicadas para (infelizmente para o amante do Mozilla em mim) não ter problemas, mas o Firefox lida com isso de maneira ingênua, desenhando o que é efetivamente um gradiente entre as duas cores da borda.
Dê uma olhada no que algo assim faz:
border-top: 100px solid transparent;
border-left: 100px solid #eee;<div style = “border-left: 100px solid #eee; border-top: 100px solid transparent”> </div>
Sim, se você estiver usando o Firefox, você verá uma linha cinza escuro entre o cinza claro e o branco, porque está renderizando um gradiente de #eeepara o preto transparente (e assim atinge um cinza escuro semitransparente no meio do gradiente).
Para fazê-lo funcionar corretamente no Firefox, você precisa de transparência em #eeevez de transparência #000. (Desculpe, converta seu hex em decimal, #rgbanão o fiz no módulo CSS3 Colors.)
border-top: 100px solid rgba(238, 238, 238, 0);
border-left: 100px solid #eee;<div style = “border-left: 100px solid #eee; border-top: 100px solid rgba (238.238.238,0)”> </div>
Do jeito que está, muitas, muitas coisas usam preto transparente quando não deveriam. E muito poucas pessoas entendem por quê.