使用CSS绘制基础的对话框图案的代码示例

前端  /  管理员 发布于 7年前   412

如下图：左侧三角形

css代码如下：

CSS Code复制内容到剪贴板

1. #talkbubble {   
2.     margin-left:30px;   
3.    width: 120px;    
4.    height: 80px;    
5.    background: red;   
6.    position: relative;   
7.    -moz-border-radius:    10px;    
8.    -webkit-border-radius: 10px;    
9.    border-radius:         10px;   
10. }   
11. #talkbubble:before {   
12.    content:"";   
13.    position: absolute;   
14.    rightright: 100%;   
15.    top: 26px;   
16.    width: 0;   
17.    height: 0;   
18.    border-top: 13px solid transparent;   
19.    border-right: 26px solid red;   
20.    border-bottom: 13px solid transparent;   
21. }  

其实，本案例的精华就是三角形的绘制，那么如何绘制三角形呢？我在这里总结一下！

上三角形，上三角形，顶部是尖的，所以用border-left，border-right，和border-bottom可以实现，给bottom一个颜色，其他设置为transparent

CSS Code复制内容到剪贴板

1. #triangle-up {   
2.     width: 0;   
3.     height: 0;   
4.     border-left: 50px solid transparent;   
5.     border-right: 50px solid transparent;   
6.     border-bottom: 100px solid red;   
7. }  

同理，大家可以判断一下如下代码分别是什么样的三角形！

CSS Code复制内容到剪贴板

1. #triangle-down {   
2.     width: 0;   
3.     height: 0;   
4.     border-left: 50px solid transparent;   
5.     border-right: 50px solid transparent;   
6.     border-top: 100px solid red;   
7. }    
8.   
9. #triangle-left {   
10.     width: 0;   
11.     height: 0;   
12.     border-top: 50px solid transparent;   
13.     border-right: 100px solid red;   
14.     border-bottom: 50px solid transparent;   
15. }   
16.   
17.  #triangle-rightright {   
18.     width: 0;   
19.     height: 0;   
20.     border-top: 50px solid transparent;   
21.     border-left: 100px solid red;   
22.     border-bottom: 50px solid transparent;   
23. }    
24.   
25. #triangle-topleft {   
26.     width: 0;   
27.     height: 0;   
28.     border-top: 100px solid red;    
29.     border-right: 100px solid transparent;             
30. }   
31. #triangle-topright {   
32.     width: 0;   
33.     height: 0;   
34.     border-top: 100px solid red;    
35.     border-left: 100px solid transparent;   
36. }   
37. #triangle-bottomleft {   
38.     width: 0;   
39.     height: 0;   
40.     border-bottom: 100px solid red;    
41.     border-right: 100px solid transparent;     
42. }     
43.   
44. #triangle-bottomright {   
45.     width: 0;   
46.     height: 0;   
47.     border-bottom: 100px solid red;    
48.     border-left: 100px solid transparent;   
49. }  

判断出上面代码分别代表什么三角形吗？没错，我的命名是根据三角形的方向来的。大家可以试一下。三角形会写了，那么对话框就迎刃而解了！ 不管是左侧的，还是上面的，只要改变一下before伪类的定位，就可以实现了。

当然，三角形的写法是很基础的。你也可以用css绘制出五角星、六角星、多边形、爱心等等。当然有些符号是不常用的，用的最多的还是三角形。