使用CSS实现小三角形效果

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

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

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

1.   
2.   
3.   
4.   
5.   
6.   
7.   
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">   
65.   "triangle-border tb-background">   
66.   
67. "message-box">  ◆ 字符实现   
68.   "triangle-character tc-border">◆   
69.   "triangle-character tc-background">◆   
70.   
71.   
72.   

以上这篇使用CSS实现小三角形效果【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。

原文地址：http://www.softwhy.com/forum.php?mod=viewthread&tid=4586