我博客的评论显示一直是类似于现代 IM 的聊天气泡的样式，即圆角长方形加上了一个具有指向性的尖角。这个可以通过 CSS 伪类（伪元素）实现。

由于是通过伪元素实现的，所以只需要一个 div 即可。

<div class="bubble">气泡内容</div>

然后书写样式，先是最基础的部分。

.bubble {
    position: relative;/*便于定位气泡的尖角*/
    /*以下的属性可以根据需要设置*/
    padding: 10px 15px;
    background: #f1f1f1;
    display: inline-block;
    margin-left: 20px
}

好，接下来讲一讲气泡的尖角是用什么原理实现的。最主要的就是 border 属性。

如果我们将一个元素的边框设置到一定大小，上下左右用不同的颜色，你会得到这样的效果。

https://codepen.io/Eltrac/pen/poJqgYR

接下来，将这个元素的长宽设置为 0，但仍保留边框。

https://codepen.io/Eltrac/pen/GRJPoLV

现在你可以看到这些边框构成了一个又一个的三角形，为了保证效果我还调整了一下边框的宽度，这就是这些气泡的尖角的原理，现在我们只需要把这些尖角加入到伪元素上。

设置一个伪类，这里使用 ::before

.bubble::before {
    content: '';
    /*记得吗 长宽要设置为 0*/
    width: 0;
    height: 0;
    /*尖角*/
    border: 15px solid transparent;
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-right-color: #f1f1f1;
    /*配合之前的 position:relative 进行定位*/
    position: absolute;
    top: 5px;
    right: 100%/*直接顶到最左边*/
}

最终效果是这样的。

https://codepen.io/Eltrac/pen/oNXJxgm

<aside> 📌 Tip 如果用 left: 100% 替换 right: 100% 可以把尖角顶到最右边 尖角是通过让其他方位的边框透明，只显示一个方向的边框实现的 这个边框的方位和尖角的位置是相反的，例如左侧的尖角用的是 border-right

</aside>

最后，推荐一个不错的工具 —— Bubble，这个可以自己通过设置项来自定义气泡，不用写代码。