纯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:#ff0 #0f0 #00f #000; } </style> 我们发现，原来当div的宽度和高度都是0的时候，它的整个边框是由四个三角形组成的，每一边为一个三角形，那么我们就可以利用这个特点，来做小尖角，我们只要把不需要的三边的边框颜色设置为与背景相同即可，这样只要能看到你想要的那个三角形了，然后再利用定位调整一下位置就可以了。代码如下： <!DOCTYPE html> <html> <head> <style> body { background:#fff; }