CSS transparent border showing border in Windows FF

Question

Im creating a CSS triangle, code:

display: block; width: 0px; height: 0px; border-style: solid; border-width: 0px 0px 9px 9px; border-color: transparent transparent rgb(255, 255, 255); position: absolute; top: 14px; left: 133px; 

The problem is that this triangle creates a border in Firefox 16.0.2 when using Windows 7.

Screen Shooting a Triangle in FF - There are two triangles, the top and the bottom, creating the same shadow

I checked in MAC FF and it does not show the borders for the triangle.

Triangle displays correctly in Chrome, Safari, IE, Opera, MAC, and Windows

Any idea why this is happening?

EDIT:

you can check it here: https://metrikstudios.com/want/fbapp/triangle-display.php The page displays the code shown above with a large triangle

Answer 1

Try using rgba colors, for example:

border-color: rgba (255, 255, 255, 0) rgba (255, 255, 255, 0) rgb (255, 255, 255);

The default border color is black, so perhaps these borders are a strange transition artifact. Instead of moving from invisible black to solid white, you will move from invisible white to solid white.

Answer 2

Do you mean the fine line between the two triangles in my example?

 .one { width: 0; height: 0; border-style: solid; border-width: 0px 0px 90px 90px; border-color: transparent transparent rgb(0, 0, 0); position: absolute; } .two { width: 0; height: 0; border-style: solid; border-width: 0px 0px 90px 90px; border-color: transparent rgb(0, 0, 0) transparent; position: absolute; } <div class="one"></div> <div class="two"></div> 

I see this line in every browser on Win7 that I tested. I think this is done in this way, and you will not get rid of it. Fiddle