仅使用CSS使共享计数的尖端部分冒泡

Question

我最近在“卫报”的网站上看到了一个nice trick。他们创造了一个漂亮的假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。不过，我不能确切地理解和是如何创建这个尖点的。在我的检查器中，它们的计算宽度都是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;
}

Answer 1

您可以使用CSS中的:before伪选择器来插入一个看起来像箭头的块。实际的箭头形状由CSS中的边框特技组成。

您可以在此处阅读有关此技术的更多信息：http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

Answer 2

正如Axel所说，它使用:before伪选择器，以及:after，以及边框、边距和定位属性。如果您正在寻找一个很好的资源来帮助您构建带有边框的箭头，如示例中所示：http://cssarrowplease.com/