我正在尝试为工具提示创建一个纯CSS三角形。所有浏览器看起来都很好,除了最新的Firefox 4.以下是代码:
<!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屏幕截图:
其他浏览器截图:
正如你在Firefox 4中看到的,它有一个像边框的东西。这是Firefox的错误还是真的是这样的行为?
如何在FF4中没有可见边界的CSS三角形?此外,我需要其他3种颜色是透明的,因为这个三角形将重叠一些元素。
解决方法
如果透明不适合你,那么使用rgba可能是这样的。
写:
.arrow { border-color:#eee rgba(255,255,0) rgba(255,0); }