css模拟小气泡三角（二）
这个跟上一篇是同一类，但是有点不同，那个是边框+小气泡三角，这个是渐变背景+小气泡三角，而且我还换了一个实现手法。
1 .down_tip{position:relative;width:300px;height:50px; 2 background: #f9d835; /* Old browsers */ 3 /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 4 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y5ZDgzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMzk2MWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 5 background: -moz-linear-gradient(top, #f9d835 1%, #f3961c 100%); /* FF3.6+ */ 6 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f9d835), color-stop(100%,#f3961c)); /* Chrome,Safari4+ */ 7 background: -webkit-linear-gradient(top, #f9d835 1%,#f3961c 100%); /* Chrome10+,Safari5.1+ */ 8 background: -o-linear-gradient(top, #f9d835 1%,#f3961c 100%); /* Opera 11.10+ */ 9 background: -ms-linear-gradient(top, #f9d835 1%,#f3961c 100%); /* IE10+ */ 10 background: linear-gradient(top, #f9d835 1%,#f3961c 100%); /* W3C */ 11 12 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f9d835',endColorstr='#f3961c'); /* IE6-8 */ 13 filter: none\9\0;/*ie9*/ 14 color:#FFFFFF;line-height:50px;text-align:center;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} 15 .down_tip:after{position:absolute;z-index:-1;bottom:-15px;left:30px;display:block;content:'.';width:0;height:0;border-top:15px solid #f3961c;border-left:15px solid transparent;border-right:15px solid transparent;}
<div class="down_tip">看我没有用图片啊，你相信吗？</div>
这个是用after伪类实现的，在div后面添加内容content:'.',然后模拟小气泡的
这个效果我只在现代浏览器里面实现。
需要介绍几个地方：
1.ie9写这么多兼容。。。是啊，我也不想，这么一大坨是用来解决，在ie9下面border-radius和背景渐变色不能共存的bug，我原以为ie9没bug啦，没想到这么多，这个我是记不住的，所以借助一个神器：http://www.colorzilla.com/gradient-editor/，下面有个ie sup.port勾选就可以啦
2.这里我实现小三角是用三边来实现的，原理呢就是：一个矩形可以是有四个三角拼成，也可以又三个三角拼成，理解不了的自己画一下就ok啦。
参考资料：http://www.ruanyifeng.com/blog/2010/04/css_speech_bubbles.html
http://cssshare.com/solutions/border/border.html
如有转载，请注明出处，尊重别人的劳动！
