如何创建一个跨浏览器的 CSS 三角形？答案

【问题标题】：How to create a cross-browser CSS triangle?如何创建一个跨浏览器的 CSS 三角形？
【发布时间】：2015-05-08 15:27:49
【问题描述】：

这是 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 中有效，这太疯狂了！）：

这是一篇关于它的博客文章（尝试在 IE11 中打开它，尽管上面有屏幕）：

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

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

【问题讨论】：

尝试添加特定的浏览器类并设置如下样式： .gecko .arrow-down {border-style: solid dotted none;}
您能否通过列出您所针对的浏览器来澄清女巫浏览器。
如果任何一个答案是可以接受的，请考虑选择一个并将其标记为接受的答案。

标签： css cross-browser geometry css-shapes

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：