爲什麼CSS旋轉導致一條線出現在這個三角形的高度？

我創建了這個CSS三角形：爲什麼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

來源

2014-02-18 aaronlbrink

可能重複反在邊框圖像在Firefox中旋轉div的別名]（http://stackoverflow.com/questions/20406355/anti-aliasing-on-ro tfox-with-border-image-in-firefox） –

只是爲了獲取信息，你可以在沒有變換的情況下做同樣的箭頭。除了你可能想要動畫。 – xpy

@HashemQolami有趣的是'translateZ'增加了另一條粉紅線（至少對我來說） – xpy

你可以嘗試沒有CSS3旋轉功能：

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

的[

來源

2014-02-20 15:05:20

爲什麼CSS旋轉導致一條線出現在這個三角形的高度？

回答

相關問題