Tip中小三角的实现
2011-08-28 10:58
183 查看
前段时间专门研究了一下腾讯微博的Tip,很有意思!tip中的小箭头是用“◆”(encode为:◆)字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是:比如tip有border时,也可以用两个绝对定位的“◆”字符模拟。 作者:愚人码头 http://www.css88.com/archives/3904
利用“◆”符号字体颜色遮罩效果,两个“◆”叠加,将上面的“◆”位置右(下,上,左)移1像素,前景色与提示框背景色相同,因此在下面的“◆”(前景色与提示框边框色一样)会流出1像素,视觉上形成了三角形的尖角边框。
源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * { margin:0; padding:0 } body { font:12px/1.5 Arial, Helvetica, sans-serif; color:#454545; } img { border:none } a { text-decoration:none; color:#333 } a:hover { text-decoration:underline } em, strong { font-style:normal; font-weight:normal } #Message { background:#eee; width:500px; margin:100px auto 0px; padding:1px; } .Message_outer { border:1px solid #aaa; margin:5px; background:#fff; } .Message_outer h3 { background: url(images/h3bg.jpg) left bottom #dedede; padding:0px 10px 0px 16px; color:#333; height:50px; line-height:50px; font-size:24px } .Message_inner { padding:10px; } .Message_inner dl { border-bottom:1px dashed #ababab; padding-bottom:10px; margin-bottom:10px; height:1%; } .Message_inner dl dt { overflow:hidden; } .Message_inner dl a.touxiang { display:block; } .left { float:left; } .right { float:right; } .Message_inner dl a.touxiang img { width:100px; height:100px; border:1px solid #ccc; padding:2px } .triangle { position:absolute; top: 30%; font-size:18px; } .t-lft { left:-9px; } .t-rgt { right:-9px } .triangle em { color:#ccc; } .t-rgt em { right:-1px; position:absolute } .triangle span { position:absolute; color:#fff } .t-lft span { left:2px; top:0px } .t-rgt span { right:1px } .tips { position:relative; border:1px solid #ccc; padding:10px; width:330px; border-radius:5px; box-shadow:1px 1px 2px rgba(0,0,0,.2); -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); } .tips a { color:#f30 } </style> </head> <body> <div id="Message"> <div class="Message_outer"> <h3><span> </span>@Twitter</h3> <div class="Message_inner"> <dl> <dt><a href="#" class="touxiang left"><img src="images/logo.jpg" /></a> <div class="tips right"> <p>@<a href="#">Tomi-Eric</a>:做插畫師或設計師是一個非常理想和神經質的。我的世界只允許我抹過的色彩 </p> <div class="triangle t-lft"> <em>◆</em><span>◆</span> </div> </div> </dt> </dl> <dl> <dt><a href="#" class="touxiang right"><img src="images/user.jpg" /></a> <div class="tips left"> <p>@<a href="#">Gino_sin</a>:做插畫師或設計師是一個非常理想和神經質的。我的世界只允許我抹過的色彩 </p> <div class="triangle t-rgt"><em>◆</em><span>◆</span></div> </div> </dt> </dl> <dl> <dt><a href="#" class="touxiang left"><img src="images/logo.jpg" /></a> <div class="tips right"> <p>@<a href="#">Tomi-Eric</a>:做插畫師或設計師是一個非常理想和神經質的。我的世界只允許我抹過的色彩 </p> <div class="triangle t-lft"> <em>◆</em><span>◆</span> </div> </div> </dt> </dl> </div> </div> </div> </body> </html>
效果图:
相关文章推荐
- Tip中小三角的实现2
- [转]Tip中小三角的实现
- 用css的border属性实现tip三角
- div+css实现的小三角tip小提示(原理及代码)
- CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦
- 利用CSS 实现子菜单三角符号效果
- Web中的Tip组件实现
- 基于jQuery Tipso插件实现消息提示框特效
- 算法实现--三角形式输出C(n,k)
- css实现小三角(原理)
- 小tip:中文英文左右padding一致两端对齐实现
- C# Tip -- C#实现MySQL数据库的备份和还原
- CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦
- java实现打印正三角的方法
- border属性实现三角、圆角图形
- 浅析新浪微博:以css实现的小三角提示框
- CSS实现三角兼容ie6
- DIV+CSS实现的小三角
- easyui datagrid 的 tip实现
- 递归经典案例,三角数字的多种实现方式