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

最新推荐文章于 2024-07-14 14:29:26 发布

墨霁青玉

最新推荐文章于 2024-07-14 14:29:26 发布

阅读量6.6k

点赞数 4

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_30604453/article/details/64141876

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

先来分析一下聊天气泡

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

矩形的实现比较简单

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

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