Çapraz tarayıcı CSS üçgeni nasıl oluşturulur? CSS üçgeni için standart CSS

Question

:

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/

Iyi çalışır, ancak OSX altında Firefox'ta pikselli kenarlı kılmaktadır.

Neyse ki bir Firefox için kolay! Yani sadece sınır tarzı uygulayalım:

border-style: solid dotted none; 

Şimdiye kadar iyi, sorun IE10 + sınır tarzı TAMAMEN sonları (bir dikdörtgen oluşturur) ayarladığınızda (ancak deli IE8, çalışıyor!) : (yukarıdaki ekranı olmasına rağmen IE11 açmayı deneyin,)

İşte

üzerine bir blog sonrası:

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

Firefox VE IE10'da nasıl çalışacağınıza dair herhangi bir fikir var mı?

Answer 1

dotted yerine double kullanın.

Ben IE10 + için çalışmıyor neden noktalı hassas nedenle farkında değilim http://jsfiddle.net/d6w2e/4/

Bkz ama çizgi nedeniyle boşlukların hesaplanması gereken yolu ile yapmak muhtemelen.

CSS üçgenin, web tarayıcılarının sınırları birbiriyle kesiştirme yöntemlerini kullanmanın yararı olmayan, ancak haksız ve kasıtsız bir yol olduğunu unutmamalıyız.

.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

o Firefox'ta sorunsuz hale böylece -moz-border-start-style: dotted; ekleyin border-style: solid tutun.

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