CSS制作提示信息框的尖角指示

引用两个◆制作尖角(引用腾讯微博中的做法)

要点:使用了两个◆,利用其位置相差度来表示框线,如果没有外框线则可以使用一个◆,具体看代码。

<style>   
.popBox { width:200px; height:300px; border:#ddd solid 1px; background:#f5f5f5; position:relative; margin-left:100px; }   
.popBox span { position:absolute; left:-9px; width:20px; height:20px; top:50px; font-size:19px; color:#f5f5f5; overflow:hidden; display:block; }   
.popBox em { font-style:normal; position:absolute; left:-11px; width:20px; height:20px; top:50px; font-size:19px; color:#ddd; overflow:hidden; display:block; }   
</style>   
<div class="popBox">   
<em>◆</em>   
<span>◆</span>   
</div>

上侧尖角和下侧尖角在某些浏览器可以需要兼容处理,这里只讲述这个方法