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

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。