分析新浪微博就会发现一个有趣的带小三角提示框。先来看下效果图：
仔细查看代码才发现，并不是使用传统做法以图片的background属性实现，而是以两个”◆”菱形字符实现，这个菱形支持
编码有
GBK，gb312，UTF-8等，也可通过转义字符◆输入。
编码有
GBK，gb312，UTF-8等，也可通过转义字符◆输入。
实现的原理是：em标签里得◆菱形符号作为外三角边框，而<span>标签里的◆菱形符号正好填充em，当两个菱形符号重叠时，只需调整span里的菱形往下移动1px，那么就能呈现1px的向上三角边框。
由于新浪微博的特性，代码并不容易提取。按照它的思路，我只好自己写一次。
下面是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属性再增大三角形边框。明确了方法与原理，我么就可以在不同方向，不同位置放置三角形了。
以上所写代码能够兼容目前所有浏览器，包括IE6。貌似新浪微博的好像不兼容IE6哦，小得瑟一下，哈哈~~~~~~~~
转载于:https://my.oschina.net/collins401/blog/57869
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/110405.html原文链接：https://javaforall.net
