Html CSS三角形粒状和锯齿状镀铬

我添加了以下代码。我试图制作一个带有边框的橙色三角形，但边框在镀铬中显示出锯齿状。有人有什么见解吗？我在下面加了小提琴。在评论中

 <div class="slideshow-overlay-wrapper cssNip">
</div>

.cssNip {
  padding-bottom: 50px;
  position: relative;
}

.cssNip:before {
  border-left: 1000px solid #fff;
  border-right: 75px solid transparent;
  right: 50%;
}

.cssNip:after {
  border-left: 75px solid transparent;
  border-right: 1000px solid #fff;
  left: 50%;
}

.cssNip:after, .cssNip:before {
  border-bottom: 50px solid #fff;
  bottom: 0;
  content: "";
  position: absolute;
  width: 50%;
  z-index: 100;
}
.slideshow-overlay-wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;
    border: none;
    background-color: #cb751b;
    margin-top: -1px;
    padding-top: 12px;
}

.cssNip{
填充底部：50px；
位置：相对位置；
}
.cssNip:之前{
左边框：1000px实心#fff；
右边框：75px实心透明；
右：50%；
}
.cssNip:之后{
左边框：75px实心透明；
右边框：1000px实心#fff；
左：50%；
}
.cssNip:after，.cssNip:before{
边框底部：50px实心#fff；
底部：0；
内容：“；
位置：绝对位置；
宽度：50%；
z指数：100；
}
.幻灯片覆盖包装{
显示：表格；
宽度：100%；
表布局：固定；
边界：无；
背景色：#cb751b；
页边顶部：-1px；
填充顶部：12px；
}

这真是愚蠢。谢谢你的帮助

.cssNip:after, .cssNip:before {
  border-bottom: 50px solid #fff;
  bottom: 0;
  content: "";
  position: absolute;
  width: 50%;
  z-index: 100;
  transform:scale(.99999);
}