如何创建跨浏览器的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/

我不知道为什么虚线对于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;
}

Answer 2

保留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;
}