【CSS】如何实现微信聊天气泡

先来分析一下聊天气泡

气泡分割为两部分，左边的矩形，右边的三角形

矩形的实现比较简单

先对对右边的三角形进行分析

div{
width:100px;
height:100px;
border:solid 50px;
border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301;
}

如果把width，height置为0，效果则如下图

div{
width:100px;
height:100px;
border:solid 50px;
border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301;
}

只需要三角形，所以把border的其中一边设置为你需要的颜色，其他三个border颜色则设置为与背景颜色相同，就得到了我们想要的三角形

所以这就是聊天气泡三角形的css

把矩形跟三角形结合在一起则变成这样子

左边矩形样式

.sendBox {

float: right;
position:relative;
right:5px;
width:auto;
max-width:180px;
min-height:32px;
line-height: 32px;
padding: 2px 8px;
font-size: 14px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:10px 0px;
}

右边三角形样式
.sendBox .arrow {
position:absolute;
top:5px;
right:-16px; /* 圆角的位置需要细心调试哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301;

}

使用CSS伪类after，before，实现聊天气泡

<body><div class="chat-bubble chat-bubble-left">这是聊天左气泡</div><div class="chat-bubble chat-bubble-right">这是聊天右气泡</div><div class="chat-bubble chat-bubble-top">这是聊天上气泡</div><div class="chat-bubble chat-bubble-bottom">这是聊天下气泡</div></body>

.chat-bubble{position: relative;margin:12px;padding:5px 8px;word-break: break-all;background:#fff;border: 1px solid #989898;border-radius: 5px;max-width:180px;
}.chat-bubble-left {}
.chat-bubble-left:before {content: '';position: absolute;width: 0;height: 0;left: -20px;top:5px;border: 10px solid;border-color:transparent #989898 transparent  transparent ;
}
.chat-bubble-left:after {content: '';position: absolute;width: 0;height: 0;left:-16px;top:7px;border: 8px solid;border-color:transparent #ffffff transparent  transparent ;
}.chat-bubble-right {}
.chat-bubble-right:before {content: '';position: absolute;width: 0;height: 0;right: -20px;top:5px;border: 10px solid;border-color:transparent transparent transparent #989898;
}
.chat-bubble-right:after {content: '';position: absolute;width: 0;height: 0;right:-16px;top:7px;border: 8px solid;border-color:transparent transparent transparent #ffffff ;
}.chat-bubble-top {}
.chat-bubble-top:before {content: '';position: absolute;width: 0;height: 0;left:10px;top:31px;border: 10px solid;border-color: #989898 transparent  transparent  transparent ;
}
.chat-bubble-top:after {content: '';position: absolute;width: 0;height: 0;left:12px;top:30px;border: 8px solid;border-color:#ffffff transparent transparent transparent  ;
}.chat-bubble-bottom {}
.chat-bubble-bottom:before {content: '';position: absolute;width: 0;height: 0;right:10px;top:-21px;border: 10px solid;border-color:transparent transparent #989898 transparent ;
}
.chat-bubble-bottom:after {content: '';position: absolute;width: 0;height: 0;right:12px;top:-16px;border: 8px solid;border-color:transparent transparent #ffffff transparent  ;
}

【CSS】如何实现微信聊天气泡相关推荐

HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
android 图片气泡,关于实现微信聊天气泡里显示图片解决方案
关于实现微信聊天气泡里显示图片这是微信的效果,气泡中的图片没有边距这是我的效果,背景气泡是用.9.png图片组成的一个selector,气泡中的图片有边距如何才能像微信那样没有边矩呢? --- ...
UIImageView 显示不规则图片，类似微信聊天气泡图片展示效果
微信聊天气泡,图片充满显示,效果: -(void)layoutSubviews { [super layoutSubviews]; CAShapeLayer * _maskLayer = [CASha ...
微信视频气泡 android,变变微信聊天气泡
变变微信聊天气泡是一款非常好用的气泡美化软件,让你的聊天框看起来更加个性化,不需要ROOT即可完成气泡设计,更具趣味性,喜欢的小伙们快来下载试试吧! 软件详情让气泡在你的指尖跳跃吧! 变变聊天气泡( ...
Android气泡弹幕,Android弹幕实现：基于B站弹幕开源系统（7）QQ、微信聊天气泡样式的弹幕...
Android弹幕实现:基于B站弹幕开源系统(7)QQ.微信聊天气泡样式的弹幕在附录文章得基础上,改进普通文本弹幕,实现一种特殊效果的文本弹幕,像QQ.微信一样的带有气泡背景的弹幕.实现的重点是在S ...
iOS实现类似微信聊天气泡
1. 说明要实现类似微信聊天气泡功能,主要有以下几个主要技术点需要实现: 背景图图拉伸后不变形 UILabel自适应宽度和高度 2. 背景图图拉伸后不变形要实现背景图拉升不变形,就要设置只让指定部 ...
自定义Android聊天气泡ChatView。仿微信聊天气泡，能自定义边框，颜色，点击特效。
原博客地址:https://blog.csdn.net/weixin_40400031/article/details/90755036 引言:最近公司准备做一款即时通讯的APP,就照着微信的功能模块 ...
微信聊天气泡随意换，一键制作超级简单，让聊天不再枯燥！
除了QQ微信也可以制作聊天气泡,今天小编给大家分享一款微信小程序,只需简单几步就可以制作出个性十足的聊天气泡效果了,赶快一起来看看吧! 这款小程序中提供了丰富的气泡模板,其中包括游戏.明星以及动漫模块 ...

【CSS】如何实现微信聊天气泡

【CSS】如何实现微信聊天气泡相关推荐

最新文章

热门文章