试图倾斜矩形的一面使用梯度，但得到锯齿状的边缘，谁能建议一个修复

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。