Question

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

 <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 Triangle Grainy和Jagged in Chrome

1 个答案: