Firefox CSS3 Isosceles Triangle Display Issues

Question

I am trying to create an isosceles triangle using CSS3 and looks like Firefox cannot render them correctly?

Is there any way to fix this?

Here is an example:

http://jsfiddle.net/WajLY/1/

CSS:

.arrow { vertical-align: middle; content: ""; border-right: 50px solid transparent; border-left: 50px solid transparent; border-top: 75px solid #222; width: 0; height: 0; } 

HTML:

 <div class="arrow"></div> 

(Firefox displays the one on the left)

Answer 1

It looks like firefox still has jagged issues.

Workaround:
I came to this workaround: An example is possible, this will help you - without warranty.

Alternative I:
Make all the borders the same size (in your example, for example, 50px), then you will not see the jagged lines. You can scale the size of the arrow with the size of the frame.

Alternative II:
Use an image (there shouldn't be a huge request / download time ...)

---

EDIT:

It worked !: jsfiddle
The trick was to add this line of code: border-style: solid dotted none;

Sincerely.