Menu
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:
Other Browsers Screenshot:
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.
888
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);
}
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/
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
