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

用css实现的各种形状_css做的各种形状

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.  <head> 
  4.   <title> New Document </title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
  6.   <meta name="Generator" content="EditPlus"> 
  7.   <meta name="Author" content=""> 
  8.   <meta name="Keywords" content=""> 
  9.   <meta name="Description" content=""> 
  10.   <!--<link href="./css" rel="stylesheet" style="text/css"/>--> 
  11.  <style type="text/css"> 
  12.     #triangle-1{ 
  13.         width:0; 
  14.         height:0; 
  15.         border-left:50px solid transparent; 
  16.         border-right:50px solid transparent; 
  17.         border-bottom:100px solid red; 
  18.         } 
  19.     #triangle-2{ 
  20.         width:0; 
  21.         height:0; 
  22.         border-left:100px solid transparent; 
  23.         border-right:200px solid transparent; 
  24.         border-bottom:100px solid purple; 
  25.         position:absolute; 
  26.         left:150px; 
  27.         ; 
  28.         } 
  29.         #triangle-3{ 
  30.         width:0; 
  31.         height:0; 
  32.         border-top:50px solid transparent; 
  33.         border-bottom:50px solid transparent; 
  34.         border-right:100px solid red; 
  35.         position:absolute; 
  36.         left:300px; 
  37.         } 
  38.     #circle{ 
  39.         width:100px; 
  40.         height:100px; 
  41.         background:blue; 
  42.         -webkit-border-radius:50px; 
  43.         -moz-border-radius:50px; 
  44.         border-radius:50px; 
  45.         position:absolute; 
  46.         top:200px; 
  47.         } 
  48.         #tixing-1{ 
  49.         width:30px; 
  50.         height:0; 
  51.         border-left:50px solid transparent; 
  52.         border-right:50px solid transparent; 
  53.         border-bottom:100px solid gray; 
  54.         position:absolute; 
  55.         top:300px; 
  56.         left:200px; 
  57.         } 
  58.  </style> 
  59.  </head> 
  60.  
  61.  <body> 
  62.   <div id="triangle-1"></div> 
  63.   <div id="triangle-2"></div> 
  64.   <div id="circle"></div> 
  65.   <div id="tixing-1"><div> 
  66.   <div id="triangle-3"></div> 
  67.  </body> 
  68. </html>