css - 如何创建跨浏览器的 CSS 三 Angular 形？

Question

这是 CSS 三 Angular 形的标准 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 中工作有什么想法吗？

Answer 1

使用 double 而不是 dotted。

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

我不知道点分不适用于 IE10+ 的确切原因，但这可能与由于间隙而需要计算线条的方式有关。

我们必须记住，CSS 三 Angular 形是一种有用但不成熟且意外的利用 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;
}