How to create a cross-browser CSS triangle?

Question

That's a standard CSS for a CSS triangle:

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/

It works well, but it renders with pixelated edges in Firefox under OSX.

Luckily there's an easy for Firefox! So let's just apply border-style:

border-style: solid dotted none;

So far so good, the problem is when you set border-style it TOTALLY breaks (renders a rectangle) in IE10+ (but works in IE8, which is crazy!):

Here's a blog post on it (try opening it in IE11, although you have screen above):

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

Any ideas how to make in work in Firefox AND IE10?

Answer 1

Use double instead of dotted.

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

I'm not aware of the precise reason why dotted doesn't work for IE10+, but it is probably to do with the way the line needs to be calculated because of the gaps.

We must remember that the CSS triangle is a useful but hacky and unintended way of exploiting the way web browsers intersect borders.

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