转换父级时边框上的不需要的轮廓

Question

我在一些内容上使用边框.但是,我发现一个不需要的1px轮廓颜色与在background转换父级时在边框周围添加颜色的颜色相同(至少使用scale和rotate).这也发生在孩子的伪元素上

.container { 
    transform:rotate(-45deg); 
}
.child {
    border:3px solid white; background:green;
}

jsFiddle与...合作

我已经在最新的Chrome和IE上测试了,问题在于两者

如何在不使用box-shadow或删除转换的情况下摆脱此轮廓？

Answer 1

添加一个translateZ(1px)

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:rotate(-45deg); 
}

(不确定为什么这样做......)

小提琴

似乎IE需要更多修复......

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:perspective(999px) translateZ(1px) rotate(-45deg); 
}

fiddle2