क्रॉस-ब्राउज़र सीएसएस त्रिकोण कैसे बनाएं?

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/

यह अच्छी तरह से काम करता है, लेकिन यह के अंतर्गत OSX फ़ायरफ़ॉक्स में pixelated किनारों के साथ बना देता है।

सौभाग्य से फ़ायरफ़ॉक्स के लिए एक आसान है! तो चलो बस सीमा शैली लागू करते हैं:

border-style: solid dotted none; 

अब तक तो अच्छा, समस्या यह है कि जब आप सीमा शैली यह पूरी तरह टूट जाता है (एक आयत renders) IE10 + में सेट (लेकिन IE8, जो पागल है में काम करता है!) :

यहाँ (, IE11 में खोलने की कोशिश यद्यपि आप स्क्रीन के ऊपर है) उस पर एक ब्लॉग पोस्ट है:

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

फ़ायरफ़ॉक्स और आईई 10 में काम करने के लिए कोई विचार कैसे?

Answer 1

dotted के बजाय double का उपयोग करें।

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

मैं सटीक कारण है कि बिंदीदार के लिए IE10 + काम नहीं करता है के बारे में पता नहीं कर रहा हूँ देखें, लेकिन यह शायद रास्ता लाइन क्योंकि अंतराल के गणना किए जाने की आवश्यकता के साथ क्या करना है।

हमें याद रखना चाहिए कि सीएसएस त्रिकोण वेब ब्राउजर सीमाओं को छेड़छाड़ करने के तरीके का शोषण करने का एक उपयोगी लेकिन हैकी और अनपेक्षित तरीका है।

.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

border-style: solid करते रहें, फिर -moz-border-start-style: dotted; जोड़ सकते हैं ताकि Firefox पर इसे सुचारू रूप से बना देता है। विशिष्ट ब्राउज़र वर्गों और शैली को जोड़ने के लिए

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