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 here（现在只是Mozilla）。希望这有帮助！

Answer 6

一种非常黑客的方法是使用旋转的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中有效。

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

8 个答案: