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

问题描述

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

I have a triangle (JSFiddle) using this 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 中的三角形.)

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.)

推荐答案

即使在纯 CSS 中我们也可以得到平滑的对角线.

Even in pure CSS we can get the smooth diagonals.

.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 会产生平滑的对角线.

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 的浏览器支持 css-tricks.com/rgba-browser-support

Check the browser support for rgba css-tricks.com/rgba-browser-support

谢谢

这篇关于如何制作边缘平滑的 CSS 三角形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！