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>
上侧尖角和下侧尖角在某些浏览器可以需要兼容处理,这里只讲述这个方法