我尝试使用CSS创建视觉效果，您可以在此处看到：http://jsfiddle.net/FL8Ug/
此时的问题是，当我在：after伪元素上使用border-top和border-bottom时，边缘变为＆＃34;锯齿状的＆＃34; （在Chrome中）。
例如，当您移除边框底部时，顶部三角形（右边框的上半部分）变得更加平滑。
我尝试同时应用-webkit-transform:translateZ(0)和-webkit-backface-visibility:hidden，这对我来说已经修复了这样的奇怪行为，但没有结果。
有没有人知道是否有解决方法？
（我也注意到在Firefox中，边框总是锯齿状，也是在删除边框底部之后。）
注意：我不想同时使用：before和：after伪元素，因为我已经使用了：before for another effect。
答案 0 :(得分：1)
我似乎已经解决了这个问题。出于某种原因，只有当你使用三个边框时才会出现锯齿状，但如果你只使用两个边框则保持平滑。因此，我将你的成绩分成两部分，然后为第三个边界做了一个。
Codepen of the solution enter code here