css绘制各种图像

 

圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框-吃豆人

 

工具/原料

 

• 编辑器一个
• 有一定的CSS3基础

方法/步骤

 

1. 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三条边的属性：