纯CSS实现聊天框气泡效果（二)

最新推荐文章于 2024-06-07 09:07:16 发布

yb305小白

最新推荐文章于 2024-06-07 09:07:16 发布

阅读量819

点赞数

分类专栏： css 文章标签： CSS气泡

本文链接：https://blog.csdn.net/yb305/article/details/103611376

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

使用:before和:after伪类实现小三角

实现过程

1.定义一个div,设置宽高，边框，创建一个矩形框。

<div class="div1"></div>
<style type="text/css">
.div1 {
  width: 300px;
  height: 35px;
  margin: 0 auto;
  margin-top: 35px;
  position: relative;
  border: 2px solid;
  border-radius:4px;
}
</style>

2.通过伪类:before在矩形框前面（左侧）添加一个小三角。

.div1::before {
  content: "";
  width: 0;
  height: 0;
  border: 10px solid;
  position: absolute;
  top: 10px;
  left: -20px;
  border-color: transparent #000 transparent transparent;
}

3.通过伪类:after在矩形框后边（右侧）添加一个红色小三角

.div1::after {
  content: "";
  width: 0;
  height: 0;
  border: 8px solid;
  position: absolute;
  top: 12px;
  left: 0px;
  border-color: transparent yellow transparent transparent;
}

4.调整.div1::after中红色小三角的位置，使当前红色小三角覆盖第一个小三角，此处修改为top:12px;left:-16px;效果如下

.div1::after {
  content: "";
  width: 0;
  height: 0;
  border: 8px solid;
  position: absolute;
  top: 12px;
  left: -16px;
  border-color: transparent red transparent transparent;
}

5.将第二个小三角的边框颜色设置为div的背景颜色白色，即 border-color: transparent #fff transparent transparent;，一个会话气泡就完成了。如图所示

6.完整代码

<!DOCTYPE html>
<html>
<head>
<style> 
body {
  background:#fff;
}
.div1 {
  width: 300px;
  height: 35px;
  margin: 0 auto;
  margin-top: 35px;
  position: relative;
  border: 2px solid;
  border-radius:4px;
}
.div1::before {
  content: "";
  width: 0;
  height: 0;
  border: 10px solid;
  position: absolute;
  top: 10px;
  left: -20px;
  border-color: transparent #000 transparent transparent;
}
.div1::after {
  content: "";
  width: 0;
  height: 0;
  border: 8px solid;
  position: absolute;
  top: 12px;
  left: -16px;
  border-color: transparent #fff transparent transparent;
}

</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>

yb305小白

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现聊天框气泡效果（二)

使用:before和:after伪类实现小三角实现过程1.定义一个div,设置宽高，边框，创建一个矩形框。<div class="div1"></div><style type="text/css">.div1 { width: 300px; height: 35px; margin: 0 auto; margin-top:...
复制链接

扫一扫

专栏目录