您的位置：首页 > Web前端 > CSS

css实现聊天气泡效果

2017-08-27 20:02 489 查看

---------------------------------------

css功能强大，能实现很多炫

酷的效果，今天给大家分享

用css3绘制聊天气泡的方法：

---------------------------------------

在绘制气泡之前，先实现箭

头的绘制，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arrow</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:0;
height:0;
border-top:30px solid black;
border-left:30px solid green;
border-right:30px solid red;
border-bottom:30px solid blue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

效果如上图所示；

-----------------------------------------

从上面的图可以发现，在未设

置宽高的情况下，上下左右的

边框都是一个三角形，如果只

留下某一个方向上的border，

就可以实现三角箭头的效果；

实现css代码和效果如下：

----------------------------------------

#box{
width:0;
height:0;
border-top:30px solid black;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;
}

-----------------------------------------

通过上面的箭头，我们就可以

绘制出一个聊天气泡了，代码

如下：

------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arrow</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
position: relative;
top:100px;
left:100px;
width: 140px;
height: 100px;
background: #088cb7;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#box:before{
position: absolute;
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

效果如上图所示：

------------------------------------

感谢大家的阅读；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航