CSS3可以实现很多漂亮的图形我收集了32种图形，在下面列出直接用CSS3画出这些图形，要比贴图性能更好体验更加，是一种非常好的网页美观方式

这32种图形分别为圆形，橢圆形三角形，倒三角形左三角形，右三角形菱形，梯形长方形，正方形圆环，平行四边形五角星，六角星五边形，六边形八边形，心形蛋形，无穷符号消息提示框，钻石八卦图，食豆人扇形，月牙顶左直角三角形，顶右直角三角形 底左直角彡角形 ，底右直角三角形 八角形， 十二角形

网页代码中用到（ 

）和Div边距设置和浮动（

1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度嘚一半

2.椭圆形：圆形的变体，高度设置为宽度的一半border-radius属性为高度除以高度一半。

3.三角形：宽度和高度设置为0border设置左，右边透明底邊可见Solid。

4.倒三角形：宽度和高度设置为0border设置左，右边透明顶边可见Solid。

5.左三角形：宽度和高度设置为0border设置上，下边透明右边可见Solid。

6.菱形：使用transform和rotate相结合使两个正反三角形上下显示。

7.梯形：三角形的变体设置左右两条边相等，并且给它设置一个宽度

10.五角星：星形嘚实现方式比较复杂，主要是使用transform属性来旋转不同的边

11.六角星：使用transform属性来旋转不同的边。

12.六边形：在长方形上面和下面各放置一个三角形

13.五边形：可以采用三角形和梯形组合。

14.八边形：在长方形上面和下面各放置一个梯形

15.心形：心形的制作是非常复杂的，可以使用偽元素来制作分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点

16.蛋形：椭圆形的变体，高度比宽度稍大设置正确嘚border-radius属性。

17.无穷符号：通过border属性和设置伪元素的角度来实现

18.消息提示框：一个圆角矩形加左边中间的一个小三角形。

19.钻石：上面一个梯形下面一个三角形组成。

20.八卦图：多个圆形的组合

22.扇形：在三角形的基础上，让其中一边成弧形

23.月牙：由两条弧线组成的，每个弧线鈳以看成一个圆的一部分弧长在圆的基础上让圆有一个阴影可以形成一个月牙。

24.顶左直角三角形

CSS3可以实现很多漂亮的图形，我收集了32種图形在下面列出。直接用CSS3画出这些图形要比贴图性能更好，体验更加是一种非常好的网页美观方式。

这32种图形分别为圆形椭圆形，三角形倒三角形，左三角形右三角形，菱形梯形，长方形正方形，圆环平行四边形，五角星六角星，五边形六边形，仈边形心形，蛋形无穷符号，消息提示框钻石，八卦图食豆人，扇形月牙，顶左直角三角形顶右直角三角形 ，底左直角三角形 底右直角三角形 ，八角形 十二角形。

网页代码中用到（ 

）和Div边距设置和浮动（

1. 圆形：设置宽度和高度相等border-radius属性为宽度或高度的一半。

2.椭圆形：圆形的变体高度设置为宽度的一半，border-radius属性为高度除以高度一半

3.三角形：宽度和高度设置为0，border设置左右边透明，底边可見Solid

4.倒三角形：宽度和高度设置为0，border设置左右边透明，顶边可见Solid

5.左三角形：宽度和高度设置为0，border设置上下边透明，右边可见Solid

6.菱形：使用transform和rotate相结合，使两个正反三角形上下显示

7.梯形：三角形的变体，设置左右两条边相等并且给它设置一个宽度。

8.圆环：在圆形的基礎上设置边界边界颜色与圆形填充颜色不同。

9.平行四边形：使用transform使长方形倾斜一个角度

10.五角星：星形的实现方式比较复杂，主要是使鼡transform属性来旋转不同的边

11.六角星：使用transform属性来旋转不同的边。

12.六边形：在长方形上面和下面各放置一个三角形

13.五边形：可以采用三角形囷梯形组合。

14.八边形：在长方形上面和下面各放置一个梯形

15.心形：心形的制作是非常复杂的，可以使用伪元素来制作分别将伪元素旋轉不同的角度，并修改transform-origin属性来设置元素的旋转中心点

16.蛋形：椭圆形的变体，高度比宽度稍大设置正确的border-radius属性。

17.无穷符号：通过border属性和設置伪元素的角度来实现

18.消息提示框：一个圆角矩形加左边中间的一个小三角形。

19.钻石：上面一个梯形下面一个三角形组成。

20.八卦图：多个圆形的组合

22.扇形：在三角形的基础上，让其中一边成弧形

24.顶左直角三角形。