本篇文章主要给大家介绍一下如何灵活的运用css3来创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前一些特殊的图形我们只能在Photoshop等图像编辑软件中制作，现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。

1）正方形以及长方形

正方形和长方形比较简单我们只需要设置一个div的宽度和高度既可;

2）圆形

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

3）三角形

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

以上制作了3个三角形，如果只想要一个，将border-color其它的颜色也设置为transparent即可。

4）心形

心形的制作是非常复杂的，可以使用两个元素来拼合制作，分别将元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。

以上代码看起来很复杂，其实主要由2个元素拼合而成，我们拆分来看box4-1和box4-2就很明了了。

5）旋转的太极

太极八卦看起来很复杂，其实跟心形的代码差不多，也是由3个元素拼接起来的，然后加上animation代码，让其自动旋转起来，看起来很酷炫。

好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信【网站源码】即可。

每日金句：用最少的悔恨面对过往。用最少的挥霍面对现在。用最多的梦想面对未来。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。