0

私は最近、ガーディアンのウェブサイトで素敵なトリックに出くわしました。彼らはこの気の利いた偽のFacebook共有ボタンを作成しました。

ここに画像の説明を入力してください

興味深い点は、彼らがシェアカウントバブルのとがった部分をどのように作るかです。それはすべてCSSと.facebook-share-countスパンの2つの空の要素で行われ、バブルを作ります。HTMLは次のとおりです。

<span class="facebook-share">
    <a class="facebook-share-btn" href="http://www.facebook.com/dialog/feed?app_id=180444840287&amp;link=http://www.guardian.co.uk/science/2013/feb/04/richard-iii-dna-bones-king&amp;display=popup&amp;redirect_uri=http://static-serve.appspot.com/static/facebook-share/callback.html&amp;show_error=false" data-href="http://www.guardian.co.uk/science/2013/feb/04/richard-iii-dna-bones-king" data-link-name="Facebook Share">
        <span class="facebook-share-icon"></span>
        <span class="facebook-share-label">Share</span>
    </a><span class="facebook-share-count"><i></i><u></u>197</span>
</span>

これがCSSです。しかし、とがこの先のとがったビットをどのように作成しているかを正確に理解することはできません。私の検査官では、両方とも計算された幅0と高さ1pxを持っています。誰かがそれをどのようにやっているのか教えてもらえますか？

.facebook-share-count {
    float: left;
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #cdd5e5;
    margin-left: 6px;
    margin-top: 1px;
    padding: 1px 2px;
    position: relative;
    height: 14px;
}

.facebook-share-count i,
.facebook-share-count u {
    border: solid transparent;
    border-right-color: #D7D7D7;
    top: 4px;
    left: -5px;
    display: block;
    position: absolute;
    height: 1px;
    border-width: 4px 5px 4px 0;
}

.facebook-share-count i {
    left: -3px;
    z-index: 5;
    border-right-color: white;
}
4

2 に答える 2

2

CSSの疑似セレクターを使用して:before、矢印のようなブロックを挿入できます。実際の矢印の形は、CSSの境界線のトリックで構成されています。

この手法の詳細については、 http ：//www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/を参照してください。

于 2013-02-04T15:39:35.223 に答える
2

Axelが言ったように、：before疑似セレクター、および：afterを、境界線、マージン、および配置プロパティとともに使用します。例のような境界線で矢印を作成するのに役立つ優れたリソースを探している場合：http：//cssarrowplease.com/

于 2013-02-04T15:54:00.293 に答える