CSS3箭頭不能在webkit中工作

試圖讓CSS3箭頭在webkit瀏覽器中工作，但我想我錯過了一些東西，代碼在firefox中工作。CSS3箭頭不能在webkit中工作

<div class="box"> 
    <h3>Box Inside</h3> 
</div> 

.box { 
    padding: 20px; 
    border: 2px solid #DDDDDD; 
    width: 150px; 
    text-align: center; 
    position:relative; 
} 

.box:after { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-color: transparent transparent transparent #fff; 
    border-style: solid; 
    border-width: 9px; 
    content: ""; 
    display: block; 
    height: 0; 
    position: absolute; 
    right: -12%; 
    top: 10px; 
    width: 0;

}

例如在：http://jsfiddle.net/fJkH8/

來源

2012-12-20 Ahmad Ajmi

您正在尋找這樣的事情？ http://css-tricks.com/snippets/css/css-triangle/ – wandarkaf

@wandarkaf我看到這個，但我希望它像一個沒有背景的邊框。就像它在Firefox中的顯示方式 –

試試這個，這個工作在Firefox和Chrome： http://cssarrowplease.com/

來源

2012-12-20 13:34:20

問題是我之前使用：除了箭頭之外的其他東西與盒子相同，所以我想用它來做：after。我想知道它是如何在Firefox中起作用的。 –

你看起來像這樣？ http://jsfiddle.net/chriscoyier/taaGc/1/ 謝謝 –

我想要類似的東西出現在Firefox中。沒有任何背景，只是邊界。謝謝 –

CSS3箭頭不能在webkit中工作

回答

相關問題