html - 如何绘制喜欢按钮右侧的# of likes bubble

Question

对于下面的 facebook 点赞按钮，按钮右侧有一个# of likes 气泡(？)(见下文 - 气泡上带有“3.5k”的文本)

问题是——它是用 css 绘制的吗？如何创建？

Answer 1

fiddle 链接:http://jsfiddle.net/zEVbe/1/

是的，那个气泡可以用 CSS 以各种方式绘制。其中一种方式写在下面。

HTML:

<div class="like">Like</div>
<div class="counter">3.5k</div>

CSS:

body{
 font-family:Calibri;
}
.like{
    background:#3b5998;
    padding:0px 10px;
    border-radius:2px;
    color:#fff;
    cursor:pointer;
    float:left;
    height:25px;
    line-height:25px;
}
.like:hover{
    background:#444;
}
.counter{
    background:#fafafa;
    border:1px solid #aaa;
    float:left;
    padding:0px 8px;
    border-radius:2px;
    margin-left:8px;
    height: 23px;
    line-height:23px;
}
.counter:before{
    display:block;
    float:left;
    content:' ';
    width:6px;
    height:6px;
    background:#fafafa;
    margin-left:-12px;
    border-right:10px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    margin-top:8px;
    border-left:1px solid #aaa;
    border-bottom:1px solid #aaa;
}