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

css实现聊天气泡以及形状--边框法

2017-08-03 14:53 246 查看

实现以下的效果可以利用css的border属性：

首先：我们给一个元素四周都加上边框的话，

.box{width:
10px;height:
10px;border:
10px
solid;border-color:
#f00
#0f0 #00f
#0ff;}

形状为：

因此：生成一个三角形的css就可以写成为：

.box{width:
0;height:
0;border:
10px
solid;border-color:
#f30
transparent transparent
transparent;}

下面就开始写一个带有边角的气泡聊天框了：

1.

<!DOCTYPE html>

<html>

<head>

<meta
charset="UTF-8">

<title></title>

<style
type="text/css">

.box{width:
300px;padding:
30px
20px;position:
relative;margin-left:
100px;background:
#0000FF;}

.box
span{width:
0;height:
0;position:
absolute;overflow:
hidden;font-size:
0;}

.box
span.bot{border-width:
20px;border-style:
solid;border-color:
#fff
#0000FF #0000FF
#fff;left:
-40px;top:
40px;}

.box
span.top{border-width:10px
20px;border-style:
dashed solid
solid dashed;border-color:
transparent #fff
#fff
transparent;left:
-40px;top:
60px;}

</style>

</head>

<body>

<div
class="box">

<span
class="bot"></span>

<span
class="top"></span>

第一个气泡……

</div>

</body>

</html>
2.

<!DOCTYPE html>

<html>

<head>

<meta
charset="UTF-8">

<title></title>

<style
type="text/css">

.box{width:
300px;padding:
30px
20px;position:
relative;margin-left:
100px;border:
5px
solid
#00FFFF;}

.box
span{width:
0;height:
0;position:
absolute;overflow:
hidden;font-size:
0;}

.box
.bot{border-width:
20px;border-style:
solid
dashed dashed;border-color:
#0ff
transparent
transparent;left:
80px;bottom:
-40px;}

.box
.top{border-width:
20px;border-style:
solid
dashed dashed;border-color:
#fff
transparent
transparent;left:
80px;bottom:
-35px;}

</style>

</head>

<body>

<div
class="box">

<span
class="bot"></span>

<span
class="top"></span>

第一个气泡……

</div>

</body>

</html>

其实这个主要是利用颜色进行的遮盖

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

标签：

相关文章推荐

新的分享

章节导航