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