来自阿里巴巴佛系Web前端程序员的指南，值得把玩的各色CSS气泡【精通CSS100例，终于有人把前端程序员必学知识点全整理出来了

line-height: 50px;

text-align: center;

}

.bubble-box::after {

content: “”;

position: absolute;

border:10px solid transparent;

border-top-color: #409eff;

border-right-color: #409eff;

right: 100%;

top: 10%;

transform: skewY(10deg);

}

拖尾气泡

---

实现思路

仔细观察图片：首先可以看到右下角的拖尾是有弧度的，在CSS中最简单实现弧度的方法：

就是对元素的圆角进行操作，只需要对两条边同时操作，即可产生效果。

border-bottom-left-radius: 15px 15px;

然后的话，拖尾是比较小的，并没有图示的大，这个时候再简单的方法，就是在上面加一层白色的div，覆盖掉其中的一部分。