2

恐怕我在当前的 Firefox (24.0) 中面临渲染故障，而 Chrome (30) 呈现与预期相同的代码。

这是代码：http ://dabblet.com/gist/6982745

HTML：

<div class="triangle"></div>

CSS：

.triangle {
    height: 50%;
    width: 40%;

    position: relative;
    top: 50px;
    left: 50px;

    background-color: black;
    overflow: hidden;
    /*
     * Here comes the malicious line:
     */
    transform: rotate(-18deg);
}
.triangle:before {
    content: "";
    width: 200%;
    height: 300%;
    position: absolute;

    background-color: white;

    transform-origin: left top;
    transform: rotate(-52deg);
}
.triangle:after {
    content: "";
    width: 200%;
    height: 300%;
    position: absolute;
    top: 38%;

    background-color: white;

    transform-origin: left top;
    transform: rotate(26deg);
}

基本上，有一个黑色正方形 (.triangle) 被旋转的白色正方形 (:before 和 :after) 部分覆盖以创建一个三角形。黑色方块本身旋转了 18 度 - 这导致 Firefox 在 .triangle 周围呈现某种灰色边框 - 即使两个白色方块都应该覆盖该区域中的每个像素。作为参考，Chrome 省略了这样的边框。一个小实验告诉我，只有在 0°、90°、180° 以外的旋转时才会出现故障......

我的问题是：我做错了什么吗？（我知道有更简单的方法来创建一个三角形 - 这只是一个简化的例子）这个故障是否有已知的解决方法？我已经尝试过 box-shadow 和 border - 都没有成功。

提前致谢 ：）

4

0 回答 0