明凯博客

关注网站技术,一个特立独行的程序员

纯CSS实现气泡提示框聊天框效果

世界上的语言多种多样,字符的种类也是千差万别,形状也是千奇百怪,所以,有些字符就可以当作图形来使用,以模拟一些web表现效果。很多对话框尖角就可以使用棱形字符(◆)来实现,我们可以让其溢出div显示,不就有了尖角效果了吗!定位可以使用margin负值或是absolute绝对定位。

注:IE6不支持边框transparent,当设置成透明时显示为黑色。而当border-style为dotted或dashed时,点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(height>=border-width*3),虚线宽长度必须是其宽度的5倍 以上(height>=border-width*5),否则点线和虚线都不会出现。最后一种效果即是利用IE6这个特性解决其边框颜色不支持透明。

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border-radius: 5px;}
.box .jt{border-width:0 10px 10px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:50px;top:-10px;_top:-12px;}
 
.box2{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border:1px solid #CCCCCC;border-radius: 5px;}
.box2 .jt{position:absolute;color:#CCCCCC;left:50px;top:-12px;font-size:22px;font-family:arial,verdana,sans-serif;}
.box2 .jt2{position:absolute;color:#EEEEEE;top:1px;left:0;}
 
.box3{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border-radius: 5px;}
.box3 .jt{border-width:0 0 15px 30px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:-30px;top:25px;}
 
.box4{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border-radius: 5px;}
.box4 div{width:0;height:0;font-size:0;position:absolute;}
.box4 .jt{border-width:10px;border-color:#FFF #EEE #EEE #FFF;border-style:solid;left:-20px;top:20px;}
.box4 .jt2{border-width:5px 10px ;border-color:transparent #FFF #FFF transparent;border-style:dashed solid solid dashed;left:-20px;top:30px;}

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="box">
    <div class="jt"></div>
</div>
 
<div class="box2">
    <span class="jt"><span class="jt2"></span></span>
</div>
 
<div class="box3">
    <div class="jt"></div>
</div>
 
<div class="box4">
    <div class="jt"></div>
    <div class="jt2"></div>
</div>

代码预览

也可以看看我博客右边侧边栏的评论框效果:
1

, , ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注