CSS转换：倾斜，锯齿状边缘

Question

css transform, jagged edges in chrome和3D CSS transform, jagged edges in Firefox的名词。

我已经搜索了很多关于此问题的文章，我使用<script type="text/javascript"> $("#login-validation").submit( function(e) { e.preventDefault(); dataVar = { email:$('input[name="email"]').val(), password:$('input[name="password"]').val() } $.ajax({ type: "POST", url: "test.php", data: dataVar, dataType: "text", success: function(data) { var x = data; if(x=="ok"){ $("#submit").html('Signing In ...'); setTimeout(' window.location.href = "index.php"; ',4000); } else if(x=="error"){ $.jGrowl("error", { sticky: false, position: 'top-right', theme: 'bg-blue-alt' }); } else{ $.jGrowl( x , { sticky: false, position: 'top-right', theme: 'bg-blue-alt' }); } } }); }); 。

我尝试使用transform: skew和backface-visibility: hidden，但没有用：（

这是我的代码：https://codepen.io/evenloooo/pen/BOjRBx

Chrome 68.0.3440.106和Microsoft Edge上有锯齿状的边缘截屏：

我希望中心线平滑，没有锯齿状的边缘。

有什么主意吗？