为什么CSS旋转导致一条线显示在这个三角形的高度？

Question

我用这个css创建了一个三角形:

.arrow-left {
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
position: relative;
left: -7px;
top: -32px;
z-index: 1;
border-right: 200px solid #CC888A;
}

但是当我向它添加变换时:

.arrow-left {
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
transform: rotate(45deg);
position: relative;
left: -7px;
top: -32px;
z-index: 1;
border-right: 200px solid #CC888A;
}

一条奇怪的虚线出现在三角形的中心.它在Chrome中显得很好,我知道Firefox会显示它.

这是一个例子:http://codepen.io/aaronlbrink/pen/zLFEJ

更新此工作:http://codepen.io/aaronlbrink/pen/qHbCG

Answer 1

您可以尝试不使用 css3 旋转功能：

width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #007bff transparent;

更多信息： http: //apps.eky.hk/css-triangle-generator/