Html 只使用CSS制作共享计数泡泡的尖头部分

我最近在《卫报》的网站上看到了一篇文章。他们创造了这个漂亮的假Facebook共享按钮

有趣的是，他们是如何制造股票泡沫中的尖头部分的。这一切都是通过CSS和.facebook共享计数范围中的两个空元素完成的，这导致了泡沫。以下是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中的

：before

伪选择器插入一个类似箭头的a块。实际的箭头形状由CSS中的边框技巧组成

您可以在此处阅读有关此技术的更多信息：

---

您可以使用CSS中的

：before

伪选择器插入一个看起来像箭头的a块。实际的箭头形状由CSS中的边框技巧组成

您可以在此处阅读有关此技术的更多信息：

---

正如Axel所说，它使用了：before伪选择器，以及：after，以及边框、边距和定位属性。

---

如果您正在寻找一个好的资源来帮助您构建带有边框的箭头，如示例中所示：

正如Axel所说，它使用：before伪选择器，以及：after，以及边框、边距和定位属性。

---

如果您正在寻找一个很好的资源，可以帮助您构建带有边框的箭头，如示例中所示：

嗯，谢谢，但我在CSS的任何地方都没有看到a:之前-下面是一个示例。对。实际上，它们在

.facebook共享计数
分区中包含了额外的标记。它们有
，这些标记被样式化为一个箭头。你不必像他们那样加入额外的标记来获得这些结果。啊，我现在明白了，谢谢阿克塞尔，YuiBlog解释得很清楚。基本上，这些微小元素上的5px右灰色边框形成了尖角形状（因为矩形边框以45度角相交），它们将其白色边框定位在上方，并将其偏移2px以显示下方的灰色。是的，正是；）当我发现刚才使用的那个诡计时，我很惊讶。CSS的极限不以正方形结束，这很好。嗯，谢谢，但我在CSS的任何地方都看不到a:之前-这里有一个例子。对。实际上，它们在
.facebook共享计数
分区中包含了额外的标记。它们有
，这些标记被样式化为一个箭头。你不必像他们那样加入额外的标记来获得这些结果。啊，我现在明白了，谢谢阿克塞尔，YuiBlog解释得很清楚。基本上，这些微小元素上的5px右灰色边框形成了尖角形状（因为矩形边框以45度角相交），它们将其白色边框定位在上方，并将其偏移2px以显示下方的灰色。是的，正是；）当我发现刚才使用的那个诡计时，我很惊讶。CSS的极限不以正方形结束真是太好了。为maceyj2干杯，我只能勾选一个答案，但给了你一张向上的票。为maceyj2干杯，我只能勾选一个答案，但给了你一张向上的票。
.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;
}