4

我正在创建一个 CSS 三角形，代码：

display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0px 9px 9px;
border-color: transparent transparent rgb(255, 255, 255);
position: absolute;
top: 14px;
left: 133px;

问题是这个三角形在使用 Windows 7 时在 Firefox 16.0.2 中呈现边框。

FF 中三角形的屏幕截图 - 有两个三角形，上级和下级，创建相同的阴影 FF 中三角形的屏幕截图 - 有两个三角形，上级和下级，创建相同的阴影

我检查了 MAC 的 FF，它没有显示三角形的任何边框。

三角形在 Chrome、Safari、IE、Opera、MAC 和 Windows 中正确显示

知道为什么会这样吗？

编辑：

您可以在此处查看：https ://metrikstudios.com/want/fbapp/triangle-display.php该页面显示上面显示的代码，并带有较大的三角形

4

2 回答 2

2

尝试改用 rgba 颜色，如下所示：

边框颜色：rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(255, 255, 255);

默认边框颜色是黑色，所以这些边框可能是一个奇怪的过渡伪影。不是从看不见的黑色变成纯白色，而是从看不见的白色变成纯白色。

于 2012-11-19T15:52:22.303 回答
0

你的意思是我的例子中两个三角形之间的细线吗？

.one {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 90px 90px;
    border-color: transparent transparent rgb(0, 0, 0);
    position: absolute;
}
.two {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 90px 90px;
    border-color: transparent rgb(0, 0, 0) transparent;
    position: absolute;
}


<div class="one"></div>
<div class="two"></div>

我在我测试过的 Win7 上的每个浏览器上都看到了这条线。我认为它是这样渲染的，你不会摆脱它。小提琴

于 2012-11-19T15:30:16.740 回答