4

我需要使用 CSS 三角形来创建和箭头。这是我正在研究的：http: //jsfiddle.net/7vRca/

<div class="arrow-outer"></div>

.arrow-outer{
border: 1em solid transparent;
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;

}

在此处输入图像描述

问题是在 chrome 中它看起来很完美。但是在Firefox中，中间有一个小弯。

知道为什么会发生这种情况，我怎样才能让它看起来像 chrome 一样平滑？

4

4 回答 4

4

不幸的是，我没有要测试的 mac，Windows 上的 Firefox 似乎可以正确呈现。你可以解决这个问题......

.arrow-outer {
  border: 2em solid transparent;
  border-right: 0;
  border-top-color: #3bb0d7;
  height: 0;
  width: 0;
}

它不是将三角形渲染为边框的两侧，而是将右边框变平以仅使用顶部边框实现相同的形状，从而避免任何对齐问题（如下图所示）。

边框直角三角形

Mac OS 上的 Firefox 可能会将 div 渲染为像素高度，这可能会使用溢出隐藏来解决，但渲染算法中的舍入导致为边缘选择不同像素的可能性相同（如果不是更有可能）浏览器和操作系统组合的右边框。这将是我对它为什么发生的猜测。

于 2012-12-27T12:08:32.023 回答
1

为透明边框设置“插图”对我有帮助。我在这里找到了这个技巧：http: //css-tricks.com/snippets/css/css-triangle/#comment-103785

于 2013-01-16T10:21:37.257 回答
1

尝试将其添加到 css 中：

 -moz-transform: scale(.9999);
于 2014-04-22T10:26:07.827 回答
0

尝试使用 RGB 而不是透明，

<div class="arrow-outer"></div>

.arrow-outer{
   border: 1em solid rgba(255,255,255,0);
   border-top-color: #3bb0d7;
   border-right-color: #3bb0d7;
   height: 0;
   width: 0;
}

正如我们在这里所做的那样：奇怪的深色边框：在 Firefox 中的 css 箭头之后

编辑：顺便说一句，它在我的 Firefox 中以两种方式工作（一个有灰线，其他没有，但从来没有你描述的效果......）

于 2012-12-27T12:04:32.150 回答