css模拟小气泡三角(二)
2012-06-07 21:59
218 查看
这个跟上一篇是同一类,但是有点不同,那个是边框+小气泡三角,这个是渐变背景+小气泡三角,而且我还换了一个实现手法。
这个是用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
如有转载,请注明出处,尊重别人的劳动!
.down_tip{position:relative;width: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:'.';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
如有转载,请注明出处,尊重别人的劳动!
相关文章推荐
- 用纯css模拟小气泡三角
- css模拟阴影和小三角提示框
- css模拟气泡对话框
- [转]纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de气泡层
- css 用◆制作 小三角气泡提示框效果
- 纯css模拟三角图形 以及 三角箭头
- CSS实现的气泡小三角
- 【笔记】css绘制带三角的气泡
- [置顶] 自己动手丰衣足食之气泡框和常见css图形(三角)
- 如何用CSS实现带三角箭头的气泡
- CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
- css实现会话气泡的效果
- 纯CSS箭头,气泡
- 用DIV+CSS写小三角
- CSS的Border实现类似对话框的小三角
- jquery博客纯css模拟淘宝详细页面底部固定
- 用div+css模拟表格对角线
- 纯css实现菱形◇变三角的小技巧
- 任务六:通过HTML及CSS模拟报纸排版
- css实现圆角及三角