css - CSS3 Mozilla边框平滑

Question

我使用三角形来形成六边形。
这是源代码：http://codepen.io/alvery/pen/zxaLbv

.triangle{
  width: 0;
  height: 0;
  position:absolute;
  overflow:hidden;
  z-index:100;
}

.topleft{
  left:0px;
  top:0px;
  border-top: 62px solid #fff; 
  border-right: 125px solid transparent;    
}

在webkit上还可以，但是在mozilla上您可以看到边框粗糙。
我知道有一种解决方案可以解决，但找不到。你能帮我吗。

Answer 1

嗯，那么您能尝试这样的事情吗？...对于Firefox，您可以添加-moz-transform：scale（.9999）;使边缘光滑。在您的情况下：

.topleft{
    left:0px;
  top:0px;
  border-top: 62px solid #fff; 
  border-right: 125px solid transparent;    
    -moz-transform: scale(.9999);
}