简明现代魔法 -> CSS层叠样式表 -> CSS 的对话气泡效果设计

CSS 的对话气泡效果设计

2010-03-24

效果演示

我在左边说话
我在右边说话
我在上边说话
我在下边说话

CSS Code

.bubble-box{
      background:#EEE;
      width:200px;
      margin-bottom:30px;
}

.bubble-box .wrap{
      background:#EEE;
      /* 修正IE6 */
      _position:relative;
      _z-index:10;
}

/* arrow-effect */
.arrow-left{ border-left:20px solid #FFF; border-top:20px solid #EEE; margin-top:20px; }
.arrow-right{ border-right:20px solid #FFF; border-top:20px solid #EEE; }
.arrow-top{ border-left:20px solid #EEE; border-top:20px solid #FFF; margin-left:20px; }
.arrow-bottom{ border-left:20px solid #EEE; border-bottom:20px solid #FFF; margin-left:20px; }

.arrow-left .wrap,
.arrow-right .wrap{
      width:180px;
      padding:12px 10px 12px 10px;
      margin-top:-40px;
}

.arrow-top, .arrow-bottom{ width:140px; }

.arrow-top .wrap,
.arrow-bottom .wrap{
      width:180px;
      padding:12px 10px 12px 10px;
      margin-left:-40px;
}

前端 code

<div class="bubble-box arrow-left">
	<div class="wrap">我在左边说话</div>
</div>

<div class="bubble-box arrow-right">
	<div class="wrap">我在右边说话</div>
</div>

<div class="bubble-box arrow-top">
	<div class="wrap">我在上边说话</div>
</div>

<div class="bubble-box arrow-bottom">
	<div class="wrap">我在下边说话</div>
</div>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们