css尖角框制作

由于之前的气泡框叠加的效果比较多，所以是直接切了小尖角的图整合在css sprite里调用定位的，图片效果固然很好，但是各页面的气泡框颜色样式等会有少许出入，重复劳动比较耗费人力物力，使用纯css实现更加便于维护修改又可减少图片文件的 http 请求数，虽然开始构建的时稍显麻烦。

以下代码据说是腾讯微博的写法，是不是腾讯原创的就不得而知了，不得不说这个写的很巧妙，使用特殊字符实现，开始还担心可能兼容性会有问题，事实证明各浏览器都很适应。

<div class="SA"><em>◆</em><span>◆</span></div>

.SA { position: relative; top: -8px; left: 510px; }

.SA em, .SA span {  width: 18px; line- color: #ccc; position: absolute; font-size: 16px; font-family: simsun; overflow: hidden; }

.SA em { z-index:99; font-style: normal; }

.SA span { color: #f6f6f6; top: 1px; left: 0px; z-index: 999; }

实现原理是使用em和span的标签叠加，设置好高度溢出隐藏，em标签用外层边框色填充文字，span标签使用内部背景色填充文字，span标签定位top：1px使有1px像素差来实现尖角边框效果。

尖角框的显示会被字号，高度，行高等影响，无特殊要求的情况下可以省略行高参数，会比较方便调整效果，具体做的时候就因为行高关系在IE6下显示有少许出入，值得注意下。