Come creare un triangolo CSS cross-browser?

Question

Questo è un CSS standard per un triangolo CSS:

display: inline-block; 
vertical-align: middle; 
content: " "; 
border-right: 4px solid transparent; 
border-left: 4px solid transparent; 
border-top: 6px solid black; 
width: 0; 
height: 0; 

http://jsfiddle.net/d6w2e/

Funziona bene, ma rende con bordi pixelated in Firefox sotto OSX.

Per fortuna c'è un facile per Firefox! Così facciamo solo applicare border-style:

border-style: solid dotted none; 

Fin qui tutto bene, il problema è quando si imposta in stile confine totalmente pause (Genera un rettangolo) in IE10 + (ma funziona in IE8, che è pazzo!) :

Ecco un post sul blog su di esso (prova ad aprirlo in IE11, anche se si dispone di schermo sopra):

http://blog.dustinboersma.com/post/45768836072/fixing-osx-firefox-border-triangle-pixelation

Qualche idea su come far funzionare in Firefox E IE10?

Answer 1

Utilizzare double anziché dotted.

Vedi http://jsfiddle.net/d6w2e/4/

io non sono a conoscenza del motivo preciso per cui tratteggiata non funziona per IE10 +, ma è probabilmente a che fare con il modo in cui la linea deve essere calcolato a causa delle lacune.

Dobbiamo ricordare che il triangolo CSS è un modo utile ma incostante e non intenzionale di sfruttare il modo in cui i browser web intersecano i confini.

.arrow-down { 
    position: absolute; 
    top: 22px; 
    left: 10px; 
    display: inline-block; 
    vertical-align: middle; 
    content: " "; 
    border-right: 32px double transparent; 
    border-left: 32px double transparent; 
    border-top: 48px solid black; 
    width: 0; 
    height: 0; 
} 

Answer 2

Tenere border-style: solid, quindi aggiungere -moz-border-start-style: dotted; in modo che su Firefox rende senza intoppi.

Ecco un CSS demo

:

.arrow-down { 
    width: 0; 
    height: 0; 
    border-width: 20px 20px 0; 
    border-style: solid; 
    -moz-border-start-style: dotted; 
    border-color: #f00 transparent; 
}