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

Question

我有一个三角形（JSFiddle），使用这个CSS：

.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 中的三角形。）

Answer 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);
}

会成功。

Answer 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);

Answer 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

谢谢

Answer 4

在 Firefox 中使用边框样式 inset 实现透明边框可以得到更好的结果：

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

Answer 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 此处（目前仅限 Mozilla）。希望这有帮助！

Answer 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 元素。

Answer 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);
}

Answer 8

其他方法都不适合我，但我发现以下方法有效（偶然）：

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

虚线/实线的混合和 rgba 修复在 FF31、IE11 和 Chrome36 中有效。