by zhangxinxu 2010-03-12 21:59

纯CSS实现的气球泡泡对话框

一、边框法实现的等腰直角三角形式的对话框

边框法实现底部90度尖角对话框
css代码:
.org_box{ height:80px; line-height:80px; margin-bottom:30px; padding-left:2em; background:#F3961C; position:relative; } .org_bot_cor{ width:0; height:0; font-size:0; border-width:15px; border-style:solid; border-color:#f3961c transparent transparent; _border-color:#f3961c white white; overflow:hidden; position:absolute; left:60px; bottom:-30px; }
HTML代码:
<div class="org_box"> <span class="org_bot_cor"></span> 边框法实现底部90度尖角对话框 </div>

二、字符法实现的等腰直角三角形式的对话框

字符法实现底部90度尖角对话框
css代码:
.org_box{ height:80px; line-height:80px; margin-bottom:30px; padding-left:2em; background:#F3961C; position:relative; } .org_bot_cor_2{ height:30px; line-height:0; font-size:60px; color:#f3961c; position:absolute; left:60px; bottom:-25px; }
HTML代码:
<div class="org_box"> <span class="org_bot_cor_2"></span> 字符法实现底部90度尖角对话框 </div>