首页 > 代码库 > css画常用图形

css画常用图形

1.圆形

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

.circle {

    width: 120px;

    height: 120px;

    background: #7fee1d;

    -moz-border-radius: 60px;

    -webkit-border-radius: 60px;

    border-radius: 60px;

}

 

2.椭圆形

设置椭圆形的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.三角形

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

  3.1up

 .triangle {

    width: 0;

    height: 0;

    border-bottom: 140px solid #fcf921;

    border-left: 70px solid transparent;

    border-right: 70px solid transparent;

  }  

3.2 down

与正三角形不同的是,倒三角形要设置的是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;

}

 3.3left

制作左三角形:

左三角形操作的是border-top、border-right和border-right三条边的属性,其中上边和下边要设置透明属性。

.triangle_left {

    width: 0;

    height: 0;

    border-top: 70px solid transparent;

    border-right: 140px solid #6bbf20;

    border-bottom: 70px solid transparent;

}  

3.4right

制作右三角形:

左三角形操作的是border-top、border-left和border-right三条边的属性,其中上边和下边要设置透明属性。

.triangle_left {

    width: 0;

    height: 0;

    border-top: 70px solid transparent;

    border-left: 140px solid #6bbf20;

    border-bottom: 70px solid transparent;


4.制作菱形

制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合,使两个正反三角形上下显示。

#diamond {

    width: 120px;

    height: 120px;

    background: #1eff00;

/* Rotate */

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

/* Rotate Origin */

    -webkit-transform-origin: 0 100%;

    -moz-transform-origin: 0 100%;

    -ms-transform-origin: 0 100%;

    -o-transform-origin: 0 100%;

    transform-origin: 0 100%;

    margin: 60px 0 10px 310px;

5.制作梯形:

梯形是三角形的一个变体,设置CSS梯形时,左右两条边设置为相等,并且给它设置一个宽度。

#trapezium {

    height: 0;

    width: 120px;

    border-bottom: 120px solid #ec3504;

    border-left: 60px solid transparent;

    border-right: 60px solid transparent;

 

6.制作平行四边形:

平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

#parallelogram {

    width: 160px;

    height: 100px;

    background: #8734f7;

    -webkit-transform: skew(30deg);

    -moz-transform: skew(30deg);

    -o-transform: skew(30deg);

    transform: skew(30deg);

}  


 

 

css画常用图形