CSS3制作各种形状图像

1. 制作圆形：

   要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID

   <div id="circle"></div> 

   圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：

   #circle {

       width: 120px;

       height: 120px;

       background: #7fee1d;

       -moz-border-radius: 60px;

       -webkit-border-radius: 60px;

       border-radius: 60px;

   } 

   
2. 2

   制作椭圆形：

   椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作

   <div id="oval"></div>  

   设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：

   #oval {

       width: 200px;

       height: 100px;

       background: #e9337c;

       -webkit-border-radius: 100px / 50px;

       -moz-border-radius: 100px / 50px;

       border-radius: 100px / 50px;

   } 

   
3. 3

   制作三角形：

   要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。

   <div id="triangle"></div>  

                              

   #triangle {

       width: 0;

       height: 0;

       border-bottom: 140px solid #fcf921;

       border-left: 70px solid transparent;

       border-right: 70px solid transparent;

   }   

   
4. 4

   制作倒三角形：

   与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：

   #triangle {

       width: 0;

       height: 0;

       border-top: 140px solid #20a3bf;

       border-left: 70px solid transparent;

       border-right: 70px solid transparent;

   }