css - 尝试使用渐变倾斜矩形的一侧但边缘呈锯齿状，有人可以建议修复吗？

Question

我创建了一个矩形按钮并想要倾斜一侧，我试图通过使用渐变来做到这一点，但倾斜的边缘确实是锯齿状的。任何人都可以就如何解决这个问题提供任何建议吗？我尝试添加translate3d(0,0,0)但没有成功。

小提琴：http: //jsfiddle.net/7YmP4/

我的CSS

div {

    -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
    backface-visibility: hidden;
}

a {
    width:200px;
    height:100px;
    display: block;
    background:-moz-linear-gradient(-72deg, transparent 75px, black 76px);
    background:-o-linear-gradient(-72deg, transparent 75px, black 76px);
    background:-webkit-linear-gradient(-72deg, transparent 75px, black 76px);
    background:linear-gradient(-72deg, transparent 75px, black 76px);
    margin:15px;
    position:relative;  
}

Answer 1

CSS 不能做漂亮的软边缘，使用 CSS 做到这一点的唯一真正方法是使用带有切割边缘的 png 背景图像，这会给你一个很好的平滑边缘，而不是你可以使用 SVG 看到的。