昨天看了一篇博文深受感受，按照作者的思路，写了一个demo

 



    

  1. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 

  2. "http://www.w3.org/1999/xhtml"> 
    3. 

  3.   
    4. 

  4.    New Document  
    5. 

  5.   "Content-Type" content="text/html; charset=gb2312"/> 
    6. 

  6.   "Generator" content="EditPlus"> 
    7. 

  7.   "Author" content=""> 
    8. 

  8.   "Keywords" content=""> 
    9. 

  9.   "Description" content=""> 
    10. 

  10.    
    11. 

  11.  "text/css"> 
    12. 

  12.     #triangle-1{ 
    13. 

  13.         width:0; 
    14. 

  14.         height:0; 
    15. 

  15.         border-left:50px solid transparent; 
    16. 

  16.         border-right:50px solid transparent; 
    17. 

  17.         border-bottom:100px solid red; 
    18. 

  18.         } 
    19. 

  19.     #triangle-2{ 
    20. 

  20.         width:0; 
    21. 

  21.         height:0; 
    22. 

  22.         border-left:100px solid transparent; 
    23. 

  23.         border-right:200px solid transparent; 
    24. 

  24.         border-bottom:100px solid purple; 
    25. 

  25.         position:absolute; 
    26. 

  26.         left:150px; 
    27. 

  27.         ; 
    28. 

  28.         } 
    29. 

  29.         #triangle-3{ 
    30. 

  30.         width:0; 
    31. 

  31.         height:0; 
    32. 

  32.         border-top:50px solid transparent; 
    33. 

  33.         border-bottom:50px solid transparent; 
    34. 

  34.         border-right:100px solid red; 
    35. 

  35.         position:absolute; 
    36. 

  36.         left:300px; 
    37. 

  37.         } 
    38. 

  38.     #circle{ 
    39. 

  39.         width:100px; 
    40. 

  40.         height:100px; 
    41. 

  41.         background:blue; 
    42. 

  42.         -webkit-border-radius:50px; 
    43. 

  43.         -moz-border-radius:50px; 
    44. 

  44.         border-radius:50px; 
    45. 

  45.         position:absolute; 
    46. 

  46.         top:200px; 
    47. 

  47.         } 
    48. 

  48.         #tixing-1{ 
    49. 

  49.         width:30px; 
    50. 

  50.         height:0; 
    51. 

  51.         border-left:50px solid transparent; 
    52. 

  52.         border-right:50px solid transparent; 
    53. 

  53.         border-bottom:100px solid gray; 
    54. 

  54.         position:absolute; 
    55. 

  55.         top:300px; 
    56. 

  56.         left:200px; 
    57. 

  57.         } 
    58. 

  58.   
    59. 

  59.   
    60. 

  60.  
    61. 

  61.   
    62. 

  62.   "triangle-1">
 

  •   "triangle-2">