Firefox CSS3 isosceles triangle rendering issues -

i'm trying create isosceles triangle using css3 , looks firefox can't render them properly?

is there way of fixing that?

here's 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 renders 1 on left)

seems firefox still has problems jagged lines.

workaround:
came accross workaround: example maybe helps out - no guarantee.

alternative i:
make borders same size (in example e.g. 50px) not see jagged lines. can scale size of arrow border-size.

alternative ii:
use image (should not huge request / load time ...)

---

edit:

got work!: jsfiddle
trick add line of code: border-style: solid dotted none;

best regards.