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

来源：互联网发布：英文句子知乎编辑：程序博客网时间：2024/05/01 16:43

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

边框法实现底部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>

0 0