如何創建一個跨瀏覽器的CSS三角形？

這是一個CSS三角形標準的CSS：如何創建一個跨瀏覽器的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/

它運作良好，但它與OSX下Firefox的像素化邊緣呈現。

幸運的是，Firefox有一個簡單的方法！所以，我們只是應用邊框樣式：

border-style: solid dotted none;

到目前爲止好，但問題是，當你設置邊框樣式它完全中斷（呈現一個長方形）在IE10 +（但在IE8，這是瘋狂的作品！）：

enter image description here

這裏有一個關於它的博客文章（嘗試在IE11中打開它，雖然你有上面的屏幕）：

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

任何想法如何在Firefox和IE10中工作？

來源

2014-05-22 user3229090

嘗試添加特定瀏覽器類和風格是這樣的：.gecko .arrow向下{邊框樣式：實虛無;} – Vel

你能澄清巫婆瀏覽器列出你的目標。 –

如果有任何答案可以接受，請考慮選擇一個並將其標記爲接受的答案。 – michaelward82

使用double而不是dotted。

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

我不知道的確切原因虛線不爲IE10 +工作，但它可能是與線需要，因爲差距要計算的方式做。

我們必須記住，CSS三角形是利用Web瀏覽器與邊界相交的方式的一種有用的，但卻很冒險且意想不到的方式。

.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; 
}

來源

2014-05-22 08:02:09 michaelward82

-1

保持border-style: solid，再加入-moz-border-start-style: dotted;以便在Firefox瀏覽器呈現平穩。

這裏有一個demo

CSS：

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

來源

2015-05-07 20:28:06

如何創建一個跨瀏覽器的CSS三角形？

回答

相關問題