0

我最近在《卫报》的网站上发现了一个不错的技巧。他们创造了这个漂亮的假 Facebook 分享按钮。

在此处输入图像描述

有趣的一点是他们如何使份额计数泡沫的尖锐部分。这一切都是用 CSS 和 .facebook-share-count 跨度中的两个空元素完成的，这会产生气泡。这是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。不过，我无法确切地弄清楚 the 和 the 是如何创建这个尖锐的位的。在我的检查员中，它们的计算宽度均为 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

您可以使用:beforeCSS 中的伪选择器插入一个看起来像箭头的块。实际的箭头形状由 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 回答