css制作聊天气泡android,css实现聊天气泡效果

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

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

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

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

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

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

头的绘制，代码如下：

1

2

3

4

5

arrow

6

7 *{

8 margin:0;

9 padding:0;

10 }

11 #box{

12 0;

13 height:0;

14 border-top:30px solid black;

15 border-left:30px solid green;

16 border-right:30px solid red;

17 border-bottom:30px solid blue;

18 }

19

20

21

22

23

24

效果如上图所示；

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

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

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

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

留下某一个方向上的border，

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

实现css代码和效果如下：

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

1 #box{

2 0;

3 height:0;

4 border-top:30px solid black;

5 border-left:30px solid transparent;

6 border-right:30px solid transparent;

7 border-bottom:30px solid transparent;

8 }

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

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

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

如下：

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

1

2

3

4

5

arrow

6

7 *{

8 margin:0;

9 padding:0;

10 }

11 #box{

12 position: relative;

13 top:100px;

14 left:100px;

15 140px;

16 height: 100px;

17 background: #088cb7;

18 -moz-border-radius: 12px;

19 -webkit-border-radius: 12px;

20 border-radius: 12px;

21 }

22 #box:before{

23 position: absolute;

24 content: "";

25 0;

26 height: 0;

27 right: 100%;

28 top: 38px;

29 border-top: 13px solid transparent;

30 border-right: 26px solid #088cb7;

31 border-bottom: 13px solid transparent;

32 }

33

34

35

36

37

38

效果如上图所示：

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

感谢大家的阅读；