【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  ;
}

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值