我有一个三角形(
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的支持
谢谢
