31

我有一个使用这个 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 中的三角形。）

4

8 回答 8

54

对于 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);
}

会成功的。

于 2014-01-10T08:15:32.803 回答
29

我刚刚偶然发现了同样的问题，并想出了这个技巧（至少，它适用于 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);
于 2012-03-30T14:54:22.370 回答
19

即使在纯 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的支持

谢谢

于 2012-02-03T17:56:43.083 回答
13

对透明边框使用边框样式inset在 Firefox 中会产生更好的效果：

border-top: 22px solid $pink;
border-right: 84px inset transparent;
border-left: 84px inset transparent;
于 2014-05-29T17:53:26.437 回答
3

当我第一次遇到这个问题时，真正帮助我的是按一定的比例缩放一个均匀的三角形。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）。希望这可以帮助！

于 2013-07-29T11:42:56.280 回答
1

一个非常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出于这个原因使用元素。

于 2011-09-12T23:22:27.653 回答
1

对我来说，使用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);
}
于 2015-06-23T23:50:31.923 回答
0

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

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

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

于 2014-08-20T17:02:48.523 回答