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

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

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

4. "Content-Type"content="text/html;charset=utf-8"/>
5. "author"content="http://www.softwhy.com/"/>
7. "text/css">
8. .message-box
9. {
10. position:relative;
11. float:left;
12. margin:80px00100px;
13. width:240px;
14. height:60px;
15. line-height:60px;
16. border:1pxsolid#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:nonedashedsoliddashed;
29. }
30. .tb-border
31. {
32. top:-10px;
33. border-color:#000transparent#000transparent;
34. }
35. .tb-background
36. {
37. top:-9px;
38. border-color:transparenttransparent#ffftransparent;
39. }
40. /*字符*/
41. .triangle-character
42. {
43. position:absolute;
44. left:100px;
45. overflow:hidden;
46. width:26px;
47. height:26px;
48. font:normal26px"宋体";
49. }
50. .tc-background
51. {
52. top:-12px;
53. color:#FFF;
54. }
55. .tc-border
56. {
57. top:-13px;
58. color:#000;
59. }
63. "message-box">border属性实现
64. "triangle-bordertb-border">