有趣的css3自定义图形

最近在做了一个项目，很漂亮的画面，里面的元素不泛有一些不规则的图形，为了不使用图片去做，我想到了强大的Css3，想看看是否有些属性可以帮助我来用代码去实现，于是，我在查找资料中找到了如下的一些非常棒的东东，我把它记录下来，如果有小伙伴和我一样需要用到此类，也可以不留痕迹的拿走去用~

1、制作圆形：

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

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

#circle {

width: 120px;

height: 120px;

background: #7fee1d;

-moz-border-radius: 60px;

-webkit-border-radius: 60px;

border-radius: 60px;

}

2、制作椭圆形：

椭圆形是正圆形的一个变体，同样使用一个带ID的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、制作三角形：

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

#triangle {

width: 0;

height: 0;

border-bottom: 140px solid #fcf921;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

}
4、制作三角形：

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