浅析新浪微博:以css实现的小三角提示框
2012-05-18 00:00
573 查看
分析新浪微博就会发现一个有趣的带小三角提示框。先来看下效果图:
![](http://www.360cold.com/uploads/allimg/120517/1-12051G34R0c8.png)
仔细查看代码才发现,并不是使用传统做法以图片的background属性实现,而是以两个"◆"菱形字符实现,这个菱形支持
编码有
GBK,gb312,UTF-8等,也可通过转义字符◆输入。
![](http://www.360cold.com/uploads/allimg/120517/1-12051G34S4R5.png)
实现的原理是:em标签里得◆菱形符号作为外三角边框,而<span>标签里的◆菱形符号正好填充em,当两个菱形符号重叠时,只需调整span里的菱形往下移动1px,那么就能呈现1px的向上三角边框。
![](http://www.360cold.com/uploads/allimg/120517/1-12051G34UYT.png)
由于新浪微博的特性,代码并不容易提取。按照它的思路,我只好自己写一次。
下面是html,为了统一把em标签换成span标签。
css代码:
为什么◆要定义字体?其目的通过字体属性把它放大,也可通过span加上字体加粗font-weight:bold属性再增大三角形边框。明确了方法与原理,我么就可以在不同方向,不同位置放置三角形了。
![](http://www.360cold.com/uploads/allimg/120517/1-12051G3491X34.png)
以上所写代码能够兼容目前所有浏览器,包括IE6。貌似新浪微博的好像不兼容IE6哦,小得瑟一下,哈哈~~~~~~~~
![](http://www.360cold.com/uploads/allimg/120517/1-12051G34R0c8.png)
仔细查看代码才发现,并不是使用传统做法以图片的background属性实现,而是以两个"◆"菱形字符实现,这个菱形支持
编码有
GBK,gb312,UTF-8等,也可通过转义字符◆输入。
![](http://www.360cold.com/uploads/allimg/120517/1-12051G34S4R5.png)
实现的原理是:em标签里得◆菱形符号作为外三角边框,而<span>标签里的◆菱形符号正好填充em,当两个菱形符号重叠时,只需调整span里的菱形往下移动1px,那么就能呈现1px的向上三角边框。
![](http://www.360cold.com/uploads/allimg/120517/1-12051G34UYT.png)
由于新浪微博的特性,代码并不容易提取。按照它的思路,我只好自己写一次。
下面是html,为了统一把em标签换成span标签。
<div class="comment"> <div class="arrow"> <span class="out">◆</span> <span class="inside">◆</span> </div> <p>带小三角的提示框</p> </div>
css代码:
.comment{padding:10px;background:#fff; border-radius:3px;border:1px solid #e1e4e5;position:relative } .arrow {_display:none;position:absolute;top:-9px;left:20px;overflow:hidden;display:block; } .arrow .out{display:inline-block;overflow:hidden;color:#e1e4e5; } .arrow .inside{top:1px;color:#fbfbfb;left:0px;position:absolute; }
为什么◆要定义字体?其目的通过字体属性把它放大,也可通过span加上字体加粗font-weight:bold属性再增大三角形边框。明确了方法与原理,我么就可以在不同方向,不同位置放置三角形了。
![](http://www.360cold.com/uploads/allimg/120517/1-12051G3491X34.png)
以上所写代码能够兼容目前所有浏览器,包括IE6。貌似新浪微博的好像不兼容IE6哦,小得瑟一下,哈哈~~~~~~~~
相关文章推荐
- 纯CSS实现小三角提示信息
- 纯CSS实现小三角提示信息
- div+css实现带三角箭头提示框
- 纯CSS实现提示框小三角
- div+css实现的小三角tip小提示(原理及代码)
- 用css伪类实现提示对话框的小三角,哈哈!
- 纯CSS实现提示框小三角
- div+css实现带三角箭头提示框
- javascript和css实现垂直方向自适应的三角提示菜单
- div+css实现带三角箭头提示框
- 纯CSS实现提示框小三角
- css 三角实现,不用图片实现
- 让你的eclipse实现写JAVA代码,HTML,CSS,JAVASCRIPT代码提示
- CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦
- css实现三角的一些方法
- 纯css实现三角
- CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦
- 纯css来实现提示框
- css实现小三角(转载+个人笔记)
- CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等