css模拟小气泡三角（二）

     这个跟上一篇是同一类，但是有点不同，那个是边框+小气泡三角，这个是渐变背景+小气泡三角，而且我还换了一个实现手法。

    

.down_tip{position:relative;300px;height:50px;
        background: #f9d835; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y5ZDgzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMzk2MWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  #f9d835 1%, #f3961c 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f9d835), color-stop(100%,#f3961c)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #f9d835 1%,#f3961c 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #f9d835 1%,#f3961c 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #f9d835 1%,#f3961c 100%); /* IE10+ */
        background: linear-gradient(top,  #f9d835 1%,#f3961c 100%); /* W3C */
        
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f9d835',endColorstr='#f3961c'); /* IE6-8 */
        filter: none\9\0;/*ie9*/ 
        color:#FFFFFF;line-height:50px;text-align:center;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
    .down_tip:after{position:absolute;z-index:-1;bottom:-15px;left:30px;display:block;content:'.';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

如有转载，请注明出处，尊重别人的劳动！