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

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

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

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

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

.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>

</body>

</html>