使用CSS实现小三角形效果【附实例】

使用CSS实现小三角形效果【附实例】:

建议:尽可能的手写代码，可以有效的提高学习效率和深度。

在众多的网页效果中，都有小三角形效果的应用，能够增加特定应用的美观度，下面就给出一段实例代码，里面介绍了两种实现小三角头效果的方式。代码如下：

1.   
2.   
3.   
4. "Content-Type" content="text/html; charset=utf-8" />   
5. "author" content="http://www.softwhy.com/" />   
6.   
7. "text/css">   
8. .message-box    
9. {   
10.   position:relative;   
11.   float:left;   
12.   margin:80px 0 0 100px;   
13.   width:240px;   
14.   height:60px;   
15.   line-height:60px;   
16.   border:1px solid #000;   
17.   text-align:center;   
18.   color:#0C7823;   
19. }   
20. .triangle-border    
21. {   
22.   position:absolute;   
23.   left:100px;   
24.   overflow:hidden;   
25.   width:0;   
26.   height:0;   
27.   border-width:10px;   
28.   border-style:none dashed solid dashed;   
29. }   
30. .tb-border    
31. {   
32.   top:-10px;   
33.   border-color:#000 transparent #000 transparent;   
34. }   
35. .tb-background    
36. {   
37.   top:-9px;   
38.   border-color:transparent transparent #fff transparent;   
39. }   
40. /*字符*/  
41. .triangle-character    
42. {   
43.   position:absolute;   
44.   left:100px;   
45.   overflow:hidden;   
46.   width:26px;   
47.   height:26px;   
48.   font:normal 26px "宋体";   
49. }   
50. .tc-background    
51. {   
52.   top:-12px;   
53.   color:#FFF;   
54. }   
55. .tc-border    
56. {   
57.   top:-13px;   
58.   color:#000;   
59. }   
60.   
61.   
62.   
63. "message-box">  border 属性实现   
64.   "triangle-border tb-border">