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

前端之家收集整理的这篇文章主要介绍了如何使CSS边界平滑的三角形?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个三角形( 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支持

谢谢

原文链接:/css/221336.html

猜你在找的CSS相关文章