如何创建跨浏览器的CSS三角形？

Question

这是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:

border-style: solid dotted none;

到目前为止一直很好,问题是当你设置边框样式时它在IE10 +中完全中断(渲染一个矩形)(但在IE8中工作,这很疯狂!):

这是一篇关于它的博客文章(尝试在IE11中打开它,虽然你有上面的屏幕):

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

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

Answer 1

使用double而不是dotted.

请参阅http://jsfiddle.net/d6w2e/4/

我不知道 dotted 不适用于 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;
}