今天小编跟大家讲解下有关纯CSS实现聊天框小尖角、气泡效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS实现聊天框小尖角、气泡效果 的相关资料，希望小伙伴们看了有所帮助。
那么 用CSS怎么实现这种效果呢 首先 来写一个简单的代码：
复制代码代码如下:<div class="arrow"></div><style type="text/css">.arrow { width:0; height:0; font-size:0; border:solid 10px #000;}</style>
这儿 我们可以得到一个黑色的正方形 其实这是边框组成的 因为div的宽度和高度都是0,。那么 我们具体来看看 div宽度和高度都是0时 它的上下左右四边框都是怎样的 下面我们把边框的各边颜色分别设置为不同颜色：
复制代码代码如下:<div class="arrow"></div><style type="text/css">.arrow { width:0; height:0; font-size:0; border:solid 10px; border-color:#f00 #0f0 #00f #000;}</style>
我们发现 原来当div的宽度和高度都是0的时候 它的整个边框是由四个三角形组成的 每一边为一个三角形 那么我们就可以利用这个特点 来做可爱的小尖角了。我们只要把不需要的三边的边框（三角形）的颜色设置为与背景相同即可 这样就只能看到你想要的那个三角形了 然后再利用定位调整一下位置就可以了。具体代码如下所示：
复制代码代码如下:<div class="send"> <div class="arrow"></div></div><style type="text/css">body { background:#4D4948;} .send { position:relative; width:150px; height:35px; background:#F8C301; border-radius:5px; margin:30px auto 0;} .send .arrow { position:absolute; top:5px; right:-16px; width:0; height:0; font-size:0; border:solid 8px; border-color:#4D4948 #4D4948 #4D4948 #F8C301;}</style>
大功告成 效果如下图：
来源：爱蒂网
