CSS实现聊天对话框样式

前端 思享 400浏览

最近打算折腾一下网站的问答分类,所以在网上找了一个css实现对话框的效果,具体效果如下图:

对话框css

CSS代码

#talk {
   margin-left: 50px;
   width: 220px;
   height: 60px;
   background: #9EEA6A;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talk:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 16px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid #9EEA6A;
   border-bottom: 13px solid transparent;
}
#talk2 {
   *margin-left: 50px;
   float:right;
   width: 220px;
   height: 60px;
   background: #9EEA6A;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talk2:before {
   content:"";
   position: absolute;
   left: 100%;
   top: 16px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-left: 26px solid #9EEA6A;
   border-bottom: 13px solid transparent;
}

html代码

可以写个简单的html查看一下具体效果

<html>
	<div id="talk"></div>
	<div id="talk2"></div>
</html>

推荐阅读

右侧固定宽度,左侧自适应两栏布局

最近修改了一个主题。原始主题的左侧是侧边栏,右侧是内容体。在代码中,侧栏代码放在主要内容之前。我的习惯是主要内容在左边,主要内容在前面,侧边栏在右边。于是我在网上搜了一下,找到了两种实现方式。一般来说,一种方法是使用cal()。我用的是这个,第二个是......

css3怎么实现文字闪烁效果

如果不需要渐变闪烁效果,我们可以在关键帧动画中定义50%和50.1%的不透明度值。...

纯css实现轮播和点击切换效果(无JS)

接下来,根据需要设置ul的长度。这里,首先制作三个切换窗口,因此ul的宽度被设置为容器宽度的300%,li是每次切换时显示的子元素,宽度被设置为所显示容器的100%。所有多余的部分都被隐藏起来,这样我们就可以通过修改ul的margin-left属性的......