CSS3箭头在webkit中不起作用

Question

尝试在webkit浏览器中使用CSS3箭头，但我想我错过了一些东西，代码在firefox中运行。

<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/

Answer 1

试试这个，这适用于firefox和chrome： http://cssarrowplease.com/