How to create cross browser CSS triangle?

Question

This is the standard CSS for the 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 displays with pixel edges in Firefox under OSX.

Fortunately, Firefox is very easy! So let's just apply the border style:

 border-style: solid dotted none; 

So far, so good that the problem is that you are setting a border style that TOTALLY breaks (draws a rectangle) in IE10 + (but works in IE8, which is crazy!):

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

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

Any ideas how to make it work in Firefox and IE10?

Answer 1

Use double instead of dotted .

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

I don’t know exactly why the dot does not work for IE10 +, but this is probably due to the way the string should be calculated due to spaces.

We must remember that the CSS triangle is a useful, but hacky and unintentional way of using the ways in which web browsers cross 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; } 

Answer 2

Save border-style: solid , then add -moz-border-start-style: dotted; so that it runs smoothly in Firefox.

Here is a 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; }