我有一个三角形(
JSFiddle)使用这个CSS:
@H_403_2@.triangle {
width: 0;
height: 0;
border-top: 0;
border-bottom: 30px solid #666699;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
和这个HTML:
@H_403_2@<div class="triangle"></div>这使一个三角形,但对角线是锯齿和像素化。我如何使他们顺利? (我能够在Safari和Chrome中通过点击它们来平滑它们,但是打破了Firefox和IE中的三角形。)
解决方法
即使在纯CSS,我们可以得到平滑的对角线。
@H_403_2@.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的支持
谢谢