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中工作

回答

相关问题