如何制作边缘平滑的 CSS 三角形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7394872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a CSS triangle with smooth edges?
提问by kirkaracha
I have a triangle (JSFiddle) using this CSS:
我有一个使用这个 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;
}
And this HTML:
而这个 HTML：
<div class="triangle"></div>
This makes a triangle, but the diagonal lines are jagged and pixelated. How can I make them smooth? (I was able to smooth them out in Safari and Chrome by making them dotted, but that broke the triangles in Firefox and IE.)
这构成了一个三角形，但对角线是锯齿状和像素化的。我怎样才能使它们光滑？（我可以通过在 Safari 和 Chrome 中将它们加点来平滑它们，但这破坏了 Firefox 和 IE 中的三角形。）
采纳答案by iamjustcoder
Even in pure CSS we can get the smooth diagonals.
即使在纯 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);
}
Instead of giving transparent you can make use of rgba(255, 255, 255, 0). This again gives transparent. But the alpha=0 makes smooth diagonals.
您可以使用 rgba(255, 255, 255, 0) 而不是透明。这再次使透明。但是 alpha=0 使对角线平滑。
Check the browser support for rgba css-tricks.com/rgba-browser-support
检查浏览器对 rgba css-tricks.com/rgba-browser-support 的支持
Thanks
谢谢
回答by Caner ?ahin
For Firefox you can add -moz-transform: scale(.9999); to make smooth edges. In your case:
对于 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);
}
Will do the trick.
会做的伎俩。
回答by unclenorton
I have just stumbled upon the same problem, and figured out this trick (at least, it works on a Mac):
我刚刚偶然发现了同样的问题，并想出了这个技巧（至少，它适用于 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);
回答by kcmr
Using border style insetfor transparent borders gives much better results in Firefox:
使用inset透明边框的边框样式在 Firefox 中效果更好：
border-top: 22px solid $pink;
border-right: 84px inset transparent;
border-left: 84px inset transparent;
回答by Sascha Michael Trinkaus
What really helped me when first stumbling over this was to scale a uniform triangle by a certain amount. Firefox seems to be particularly 'edgy' with scalene triangles. Interesting though, perfect triangles get rendered without jagged edges. If CSS transforms are possible in your project, just try:
当我第一次遇到这个问题时，真正帮助我的是将均匀三角形缩放一定量。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
}
This fixed the aliasing across the edge for me. JSFiddle here(Mozilla only right now). Hope this helps!
这为我修复了边缘的锯齿。JSFiddle在这里（目前仅适用于 Mozilla）。希望这可以帮助！
回答by Mohsen
A very hacky way would be using a rotated div
一个非常hacky的方法是使用旋转的div
Here I used two divs to show a triangle:
这里我用了两个 div 来显示一个三角形：
<div class="triangle">
<div class="rot"></div>
</div>
and rotated the inner div for two not right sides of triangle:
并为三角形的两个非右侧旋转内部 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;
}
I didn't tried to find the relation between numbers.
我没有试图找到数字之间的关系。
Here is the fiddle of the code:
这是代码的小提琴：
http://jsfiddle.net/mohsen/HTMcF/
http://jsfiddle.net/mohsen/HTMcF/
BUT I would strongly suggest you to use canvaselement for this reason.
但是我强烈建议您canvas出于这个原因使用element。
回答by tobymackenzie
For me, using dashedfor the transparent borders worked for most browsers that don't automatically smooth them and rotating 360 degrees worked for old Webkit:
对我来说，使用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);
}
回答by Don
None of the others worked for me, but I found the following did (by accident):
其他人都没有为我工作，但我发现以下内容（偶然）：
.triangle {
border: 1.3rem dashed #666699;
border-right: .5rem solid rgba(255, 255, 255, 0);
}
The mixture of dashed/solid and the rgba fix worked in FF31, IE11, and Chrome36.
虚线/实线和 rgba 修复的混合适用于 FF31、IE11 和 Chrome36。
