昨天看了一篇博文深受感受，按照作者的思路，写了一个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">