如何使CSS边界平滑的三角形？ [英] How do I make a CSS triangle with smooth edges?

问题描述

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

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）。这再次给出透明度。

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边界平滑的三角形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！