CSS Chrome 中的三角形颗粒状和锯齿状

Question

我用下面的代码添加了一个 fiddle。我正在尝试制作一个带边框的橙色三角形，但边框在 Chrome 中显示为锯齿状。有没有人有任何见识？我在下面添加了 fiddle。在评论中

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

Answer 1

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

这很管用。谢谢您的帮助。

CSS Chrome 中的三角形颗粒状和锯齿状

CSS Triangle Grainy and Jagged in Chrome

html

css

google-chrome

border

cross-browser