纯CSS实现聊天框气泡效果(一)

最新推荐文章于 2024-07-26 16:03:03 发布

yb305小白

最新推荐文章于 2024-07-26 16:03:03 发布

阅读量1.9k

点赞数 2

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

原文链接：https://www.jb51.net/css/150389.html

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS气泡实现过程

<div class="arrow"></div>
<style type="text/css">
.arrow {
    width:0;
    height:0;
    font-size:0;
    border:solid 10px #000;
}
</style>

我们可以得到一个黑色的正方形，其实这是边框组成的，因为div的宽度和高度都是0。那么，我们具体来看看，div宽度和高度都是0时，它的上下左右四边框都是怎样的，下面我们把边框的各边框的各边颜色分别设置为不同颜色：

<div class="arrow"></div>
<style type="text/css">
.arrow{
    width:0;
    height:0;
    font-size:0;
    border:solid 10px;
    border-color:#ff0 #0f0 #00f #000;
}
</style>

我们发现，原来当div的宽度和高度都是0的时候，它的整个边框是由四个三角形组成的，每一边为一个三角形，那么我们就可以利用这个特点，来做小尖角，我们只要把不需要的三边的边框颜色设置为与背景相同即可，这样只要能看到你想要的那个三角形了，然后再利用定位调整一下位置就可以了。代码如下：

<!DOCTYPE html>
<html>
<head>
<style> 
body {
	background:#fff;
}
.send {
  position:relative;
  width:150px;
  height:35px;
  background:#F8C301;
  border-radius:5px; /* 圆角 */
  margin:30px auto 0;
}

.send .arrow {
  position:absolute;
  top:8px;
  left:-16px; /* 圆角的位置需要细心调试哦 */
  width:0;
  height:0;
  font-size:0;
  border:solid 8px;
  border-color:#fff #F8C301 #fff #fff;
}

</style>
</head>
<body>
<div class="send">
	<div class="arrow"></div>
</div>
</body>
</html>