Css 按钮中扭曲的伪元素周围的奇怪轮廓

我在按钮中使用伪元素来实现有角度的边框。但在某些浏览器和某些缩放级别中，如果仔细观察，您会看到伪元素周围有一个模糊的轮廓，位于伪元素左边缘按钮的右侧

这是小提琴：

。按钮{
位置：相对位置；
填充：0 20px；
高度：53px；
背景色：红色；
边框：4倍纯黑；
右边框宽度：0；
颜色：白色；
字号：900；
字体大小：14px；
过渡：全部.425秒轻松；
文字装饰：无；
显示：内联flex；
对齐项目：居中；
z指数：1；
过滤器：模糊（0）；
}
.按钮：：之后{
位置：绝对位置；
内容：''；
右：-19px；
顶部：-4px；
高度：53px；
宽度：38px；
背景色：红色；
边框：4倍纯黑；
z指数：-1；
左边框：0；
变换：倾斜（-31度）；
过渡：全部.425秒轻松；
背面可见性：隐藏；
}

---

我会考虑一个不同的想法，你不会有这个问题。使形状仅作为一个元素，并依靠溢出来隐藏不需要的部分

。按钮{
位置：相对位置；
显示：内联块；
填充：0 40px 0 20px；
线高：53px；
左边框：4倍纯黑；
颜色：白色；
字号：900；
字体大小：14px；
文字装饰：无；
溢出：隐藏；
z指数：0；
}
.按钮：：之后{
位置：绝对位置；
内容：''；
右：0；
排名：0；
左：-5px；
底部：0；
背景：红色；
边框：4倍纯黑；
z指数：-1；
变换：倾斜（-31度）；
变换原点：顶部；
}

---

。按钮：焦点{大纲：无；}？