如何使CSS边界平滑的三角形？

我有一个三角形( 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中的三角形。)

解决方法

即使在纯CSS，我们可以得到平滑的对角线。

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid rgba(255,255,0); 
    border-right: 20px solid rgba(255,0);
}

而不是给透明，你可以使用rgba(255，255，255，0)。这再次给透明。但alpha = 0使平滑的对角线。

检查浏览器对rgba css-tricks.com/rgba-browser-support的支持

谢谢

原文地址：https://www.jb51.cc/css/221336.html