如何制作边缘平滑的 CSS 三角形？

Posted 2023-03-12

【中文标题】如何制作边缘平滑的 CSS 三角形？

【英文标题】：How do I make a CSS triangle with smooth edges?

【发布时间】：2011-11-15 17:30:55

【问题描述】：

我有一个使用这个 CSS 的三角形 (JSFiddle)：

.triangle 
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    

还有这个 html：

<div class="triangle"></div>

这会形成一个三角形，但对角线是锯齿状和像素化的。我怎样才能使它们光滑？ （我可以在 Safari 和 Chrome 中通过将它们打点来平滑它们，但这打破了 Firefox 和 IE 中的三角形。）

【问题讨论】：

我现在用的是FF6，这里很流畅（抗锯齿）。 IE 在所有地方都渲染得很糟糕，所以这并不让我感到惊讶。你用的是什么版本的FF？

奇怪，FF6 和 Chrome 13 用平滑的边缘渲染它，而 IE8 和 Safari 5.1 都渲染锯齿状边缘。操作系统=Win XP SP3。

Firefox 6.0.2 和 Chrome 13 (OS X)、IE8 (Windows XP) 对我来说是锯齿状的。 （Parallels 中的 Windows 仿真。）

我认为这个问题已经过时了——默认情况下 webkit 中的角是反锯齿的，并且在 Firefox jsbin.com/opusan/1/edit 中使用“dotted”修复它（在 Firefox bugzilla.mozilla.org/show_bug.cgi?id=805393 中使用票证）跨度>

【参考方案1】：

对于 Firefox，您可以添加 -moz-transform: scale(.9999);使边缘光滑。在你的情况下：

.triangle 
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    -moz-transform: scale(.9999);

会成功的。

【讨论】：

太棒了！拯救了我的一天！

这行得通，但在我的电脑上它使线条看起来“太平滑”，即与旋转（0.01deg）方法相比有点模糊

@ErinDrummond 您尝试过哪个浏览器和版本？正如我暗示的那样，我的答案只适用于 Firefox。我已经用 Firefox (32.0.3) for Mac 检查了 rotate(0.01)，但它并没有给我一条平滑的线。

@CanerŞahin 我在 Linux (Fedora 20) 上使用 Firefox 32.something。我在 Firefox for Mac (32.0.3) 上根本没有出现锯齿状边缘问题，不需要解决方法

对于 FF36 上的我来说，我仍然感到有些粗糙。使用 -moz-transform: scale(.9999); 对我有用。

【参考方案2】：

我刚刚偶然发现了同样的问题，并想出了这个技巧（至少，它适用于 Mac）：

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); /* Didn't check Opera yet */
transform: rotate(0.05deg);

【讨论】：

我只在我的 CSS 中添加了-webkit-transform: rotate(0.01deg);，这对于 Windows 和 Mac 上的 Webkit（Win 上的 Chrome，OSX 上的 Safari）都非常有效 其他浏览器（至少在 Windows 上）显示了三角形完美平滑，除了 Opera。那个还没修好...

我建议进行 360 度旋转，以便三角形位于同一位置 transform: rotate(360deg);

按照@JohnC 的建议执行旋转（360deg）并不能精确地工作，因为它将三角形置于相同的位置 - 旋转 0.01deg 将其稍微移动到足以应用抗锯齿但不足以让人类能够知道它被旋转了

我的问题是 Chrome (40) Firefox 很好，这个修复对我有用，并且建议使用 360 度，谢谢大家

【参考方案3】：

即使在纯 CSS 中，我们也可以获得平滑的对角线。

.triangle 
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid rgba(255, 255, 255, 0); 
    border-right: 20px solid rgba(255, 255, 255, 0);

您可以使用 rgba(255, 255, 255, 0) 来代替透明。这再次给出透明。但是 alpha=0 会产生平滑的对角线。

检查浏览器对 rgba css-tricks.com/rgba-browser-support的支持

谢谢

【讨论】：

rgba 将删除那些恼人的额外边框 Firefox 似乎也添加了这些天。

Firefox 36 现在我仍然有像素化边缘，即使使用此代码。但是，它总是在不等边的三角形上，不相等。

我添加以下内容以使不等三角形上的边缘平滑：-moz-transform: scale(.9999);.

应该将关于 -moz-transform: scale(.9999) 的答案标记为正确答案，这样才有效

【参考方案4】：

将边框样式inset 用于透明边框可以在 Firefox 中获得更好的效果：

border-top: 22px solid $pink;
border-right: 84px inset transparent;
border-left: 84px inset transparent;

【参考方案5】：

当我第一次遇到这个问题时，真正帮助我的是把一个均匀的三角形按一定的比例缩放。 Firefox 似乎对不等边三角形特别“前卫”。不过有趣的是，完美的三角形在渲染时没有锯齿状的边缘。如果您的项目中可以进行 CSS 转换，请尝试：

.triangle 
  width: 0;
  height: 0;
  border-top: 0;
  border-bottom: 20px solid #666699;
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent;
  -moz-transform: scaleY(1.5); // optional: replace with Sass/SCSS/LESS mixin
  -moz-transform-origin: top; // optional: replace with mixin, too

这为我修复了边缘的锯齿。 JSFiddle here（目前仅适用于 Mozilla）。希望这会有所帮助！

【参考方案6】：

一个非常hacky的方法是使用一个旋转的div

这里我用了两个div来显示一个三角形：

<div class="triangle">
    <div class="rot"></div>
</div>

并将内部 div 旋转为三角形的两个非右侧：

.triangle
    position:relative;
    width:100px;
    height:60px;
    border-bottom:1px solid black;
    border-radius:12px;

.rot
    border-radius:10px;
    border-left: 1px solid black;
border-top: 1px solid black;
width:70px; height:70px;
    -webkit-transform:rotate(45deg);
    position:absolute;
    left:15px;
    top:23px;

我没有试图找到数字之间的关系。

这是代码的小提琴：

http://jsfiddle.net/mohsen/HTMcF/

但出于这个原因，我强烈建议您使用canvas 元素。

【讨论】：

IE8 永远不会原生支持canvas，你必须使用 IE9。

【参考方案7】：

对我来说，使用dashed 作为透明边框适用于大多数不能自动平滑边框的浏览器，而 360 度旋转适用于旧版 Webkit：

.triangle 
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px dashed transparent; 
    border-right: 20px dashed transparent;
    -webkit-transform: rotate(360deg);

【参考方案8】：

其他人都没有为我工作，但我发现以下工作（偶然）：

.triangle 
  border: 1.3rem dashed #666699;
  border-right: .5rem solid rgba(255, 255, 255, 0);

虚线/实线和 rgba 修复的混合适用于 FF31、IE11 和 Chrome36。