CSS3制作各种形状图像

  • Post author:
  • Post category:其他





  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 {