KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
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.
Tags (comma-separated)
Save Edits
Cancel