Question

我正在尝试为工具提示创建一个纯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 screenshot

其他浏览器屏幕截图：

enter image description here

正如您在Firefox 4中看到的那样，它有类似边框的东西。它是一个Firefox bug还是这个行为？

如何在FF4中实现没有可见边框的纯CSS三角形？另外，我需要其他3种颜色是透明的，因为这个三角形会重叠一些元素。

Answer 1

如果transparent不起作用，那么使用rgba可能就是这样。

写：

.arrow {
    border-color:#eee rgba(255,255,255,0)  rgba(255,255,255,0)  rgba(255,255,255,0);
}

Answer 2

好的，我可以看到问题，并发现如果你将边框样式更改为“outset”，如果将在FF4中修复，也可以在IE9中使用。

那会给你这样的东西：

.arrow {
     border:50px outset transparent ;
     border-top:#eee 50px solid;
     display:block;
     height:0;
     width:0;
     top:50%;
     right:50%;
     position:absolute;
}

PS。我使用最新的firefox稳定版在Vista上。

这是jsFiddle：http://jsfiddle.net/UFSpd/1/

Firefox 4中的CSS透明边框问题？

2 个答案: