Css 尝试使用渐变倾斜矩形的一侧，但得到锯齿状边缘，有人能建议修复吗？

我已经创建了一个矩形按钮，想要倾斜一边，我试图通过使用渐变来做到这一点，但是倾斜的边确实参差不齐。有人能就如何顺利进行这项工作提出建议吗？我尝试添加

translate3d（0,0,0）

，但没有成功

小提琴：

我的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;  
}

---

CSS不能处理好软边，使用CSS处理软边的唯一真正方法是使用带有剪切边的png背景图像，这将为您提供一个良好的平滑边，而不是您可以使用SVG查看的边缘。

基本上，问题是您使用了错误的工具。看到你瞄准了最近的浏览器，你想过使用SVG吗？嘿，乔治，是的，SVG是一种可能。我只是想看看这是否可以通过CSS实现，但是锯齿状的边缘似乎是个问题