CSS Transparent Border Problem In Firefox 4?

Question

I\'m trying to create a pure CSS triangle for a tooltip. All browsers looks fine except for the latest Firefox 4. Here\'s the code:

<         


        

Answer 1

Okay I could see the problem, and found out that if you change the border style to "outset" if will be fixed in FF4, and works in IE9 too.

That would give you something like this:

.arrow {
     border:50px outset transparent ;
     border-top:#eee 50px solid;
     display:block;
     height:0;
     width:0;
     top:50%;
     right:50%;
     position:absolute;
}

PS. I'm on Vista with the newest firefox stable.

Here is the jsFiddle: http://jsfiddle.net/UFSpd/1/

Answer 2

if transparent is not work for you then use rgba may be that's work.

Write:

.arrow {
    border-color:#eee rgba(255,255,255,0)  rgba(255,255,255,0)  rgba(255,255,255,0);
}