0

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;

} </p>

例: http://jsfiddle.net/fJkH8/

4

1 に答える 1

1

これを試してみてください。これは Firefox と chrome で動作します: http://cssarrowplease.com/

于 2012-12-20T13:34:20.060 に答える