如何制作边缘光滑的CSS三角形？

Question

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

Answer 1

对于Firefox,您可以添加-moz-transform:scale(.9999); 使光滑的边缘.在你的情况下:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    -moz-transform: scale(.9999);
}

会做的伎俩.

Answer 2

我偶然发现了同样的问题,并找出了这个技巧(至少,它适用于Mac):

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); /* Didn't check Opera yet */
transform: rotate(0.05deg);

Answer 3

即使在纯CSS中,我们也可以获得平滑的对角线.

.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).这又是透明的.但是alpha = 0会产生平滑的对角线.

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

谢谢

Answer 4

inset在透明边框中使用边框样式可以在Firefox中获得更好的效果:

border-top: 22px solid $pink;
border-right: 84px inset transparent;
border-left: 84px inset transparent;