新学到的一个小效果
用CSS实现如下图效果，其中demo结构为：<div id=”square”></div>
实现这个效果需要用到两个知识点：
1、用border制作三角形
2、before、after伪元素
伪类元素可以看做是在某元素前加了一个元素
比如：<p>刘诗诗</p>
如果给这个元素设置一个before, p:before{content:”我爱”;},这个p就变成了：我爱刘诗诗
如果给这个元素设置一个after, p:after{content:”我爱”;},这个p就变成了：刘诗诗爱我
（ps:哈哈，这样有点不要脸，但是我爱刘诗诗！）
回到题目上，这个效果就是先画一个矩形，然后通过after或者before加上一个三角形，放到矩形右上角去。
那么如何用边框画三角形呢？
举例演示给大家：
代码如下：写一个p标签，给其设置如下样式
p{ ???????????????width:50px; ???????????????height:30px; ???????????????border-left:20px solid yellow; ???????????????border-right:20px solid blue; ???????????????border-top:20px solid red; ???????????????border-bottom:20px solid pink; ???????????????margin:100px auto; ???????????}
效果如图：
若此时，我们将p的宽高设为0px,效果如图：
不难发现，只要在这个基础上将边框的三面颜色设置为透明，就能得到一个三角形。
但有一点是，矩形是缺了一段的，我们可以让三角形颜色为白色覆盖掉矩形的边框，另外再用一个黑色的，比白色大的三角形放在白三角形的下面，这样就只漏出三角形的两条边了，所以这里同时用到了after和before，代码如下
#square{ ???????????????width:200px; ???????????????height:100px; ???????????????border:2px solid black; ???????????????margin:20px auto; ???????????????position:relative; ???????????} ???????????#square:before{ ???????????????content:""; ???????????????width:0px; ???????????????height:0px; ???????????????border:10px solid transparent; ???????????????border-left-color:black; ???????????????position:absolute; ???????????????top:20px; ???????????????left:200px; ???????????} ???????????#square:after{ ???????????????content:""; ???????????????width:0px; ???????????????height:0px; ???????????????border:8px solid transparent; ???????????????border-left-color:white; ???????????????position:absolute; ???????????????top:22px; ???????????????left:200px; ???????????}这样就实现效果啦！
用CSS写气泡
原文地址：http://www.cnblogs.com/libijun96/p/7906488.html