16

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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
.arrow {
    border:50px solid;
    border-color:#eee transparent transparent transparent;
    display:block;
    height:0;
    width:0;
    top:50%;
    right:50%;
    position:absolute;
}
</style>
</head>
<body>
<div style="border:1px solid #000; height:400px; width:400px; margin:50px auto; position:relative;">
    <span class="arrow"></span>
</div>
</body>
</html>

Firefox 4 Screenshot:

Firefox 4 screenshot

Other Browsers Screenshot:

enter image description here

As you can see in Firefox 4, it has something like a border. Is it a Firefox bug or this is really the behavior?

How can I achieve a pure CSS triangle without that visible border in FF4? Also, I need the other 3 colors to be transparent because this triangle will overlap some elements.

bloggerious
  • 337
  • 5
  • 13

2 Answers2

24

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);
}
Roman Starkov
  • 59,298
  • 38
  • 251
  • 324
sandeep
  • 91,313
  • 23
  • 137
  • 155
11

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/

Allan Kimmer Jensen
  • 4,333
  • 2
  • 31
  • 53