css 32种图形绘制

1、正方形（square）：

CSS Code:

1. .square {
2. width: 100px;
3. height: 100px;
4. background: #E5C3B2;
5. }

上面的方法是，设置宽度和高度一致就可以实现正方形的效果，下面展示一种boder制作正方形的效果：

1. .square {
2. width: 0;
3. height: 0;
4. border: 50px solid #E5C3B2; /*边框大小等于正方形宽度（或高度）的一半*/
5. }

效果：

2、平行四边形（parallelogram）

CSS Code:

1. .parallelogram {
2. width: 100px;
3. height: 70px;
4. -webkit-transform: skew(20deg);
5. -moz-transform: skew(20deg);
6. -o-transform: skew(20deg);
7. -ms-transform: skew(20deg);
8. transform: skew(20deg);
9. background: #E5C3B2;
10. }

效果：

我们可以通过“skew”的值大小来控制角度，如果其值为负值，将会改变扭曲方向：

1. .parallelogram2 {
2. width: 100px;
3. height: 70px;
4. -webkit-transform: skew(-20deg);
5. -moz-transform: skew(-20deg);
6. -o-transform: skew(-20deg);
7. -ms-transform: skew(-20deg);
8. transform: skew(-20deg);
9. background: #E5C3B2;
10. }

效果：

3、菱形(diamond)

CSS Code:

1. .diamond {
2. width: 80px;
3. height: 80px;
4. margin: 40px 0 0 40px;
5. -webkit-transform-origin: 0 100%;
6. -moz-transform-origin: 0 100%;
7. -o-transform-origin: 0 100%;
8. -ms-transform-origin: 0 100%;
9. transform-origin: 0 100%;
10. -webkit-transform: rotate(-45deg);
11. -moz-transform: rotate(-45deg);
12. -o-transform: rotate(-45deg);
13. -ms-transform: rotate(-45deg);
14. transform: rotate(-45deg);
15. background: #E5C3B2;
16. }

效果：

4、长方形（）

CSS Code:

1. .rectangle {
2. width: 100px;
3. height: 50px;
4. background: #E5C3B2;
5. }

效果：

5、梯形（trapezoid）

梯形一

CSS Code:

1. .trapezoid-1 {
2. height: 0;
3. width: 100px;
4. border-bottom: 100px solid #e5c3b2;
5. border-left: 60px solid transparent;
6. border-right: 60px solid transparent;
7. }

效果：

梯形二

CSS Code:

1. .trapezoid-2 {
2. height: 0;
3. width: 100px;
4. border-top: 100px solid #e5c3b2;
5. border-left: 60px solid transparent;
6. border-right: 60px solid transparent;
7. }

效果：

梯形三

CSS Code:

1. .trapezoid-3 {
2. height: 100px;
3. width: 0;
4. border-right: 100px solid #e5c3b2;
5. border-top: 60px solid transparent;
6. border-bottom: 60px solid transparent;
7. }

效果：

梯形四

CSS Code:

1. .trapezoid-4 {
2. height: 100px;
3. width: 0;
4. border-left: 100px solid #e5c3b2;
5. border-top: 60px solid transparent;
6. border-bottom: 60px solid transparent;
7. }

效果：

6、三角形（triangle）

三角形朝上

CSS Code:

1. .triangle-up {
2. height: 0;
3. width: 0;
4. border: 50px solid #e5c3b2;
5. border-color:transparent transparent #e5c3b2 transparent;
6. }

效果：

三角朝右

CSS Code:

1. .triangle-rihgt {
2. height: 0;
3. width: 0;
4. border: 50px solid #e5c3b2;
5. border-color:transparent transparent transparent #e5c3b2;
6. }

效果：

三角朝下

CSS Code:

1. .triangle-down {
2. height: 0;
3. width: 0;
4. border: 50px solid #e5c3b2;
5. border-color: #e5c3b2 transparent transparent transparent;
6. }

效果：

三角朝左

CSS Code:

1. .triangle-left {
2. height: 0;
3. width: 0;
4. border: 50px solid #e5c3b2;
5. border-color:transparent #e5c3b2 transparent transparent;
6. }

效果：

7、半圆（semicircle）

上半圆

CSS Code:

1. .semicircle-top {
2. background: #e5c3b2;
3. height: 25px;
4. width: 50px;
5. -moz-border-radius: 50px 50px 0 0;
6. -webkit-border-radius: 50px 50px 0 0;
7. border-radius: 50px 50px 0 0;
8. }

效果：

右半圆

CSS Code:

1. .semicircle-right {
2. background: #e5c3b2;
3. height: 50px;
4. width: 25px;
5. -moz-border-radius: 0 0px 50px 0;
6. -webkit-border-radius: 0 50px 50px 0;
7. border-radius: 0 50px 50px 0;
8. }

效果：

下半圆

CSS Code:

1. .semicircle-down {
2. background: #e5c3b2;
3. height: 25px;
4. width: 50px;
5. -moz-border-radius: 0 0 50px 50px;
6. -webkit-border-radius: 0 0 50px 50px;
7. border-radius: 0 0 50px 50px;
8. }

效果：

左半圆

CSS Code:

1. .semicircle-left {
2. background: #e5c3b2;
3. height: 50px;
4. width: 25px;
5. -moz-border-radius: 50px 0 0 50px;
6. -webkit-border-radius: 50px 0 0 50px;
7. border-radius: 50px 0 0 50px;
8. }

效果：

8、圆（circle）

CSS Code:

1. .circle {
2. background: #e5c3b2;
3. height: 50px;
4. width: 50px;
5. -moz-border-radius: 25px;
6. -webkit-border-radius: 25px;
7. border-radius: 25px;
8. }

效果：

9、椭圆（oval）

水平椭圆

CSS Code:

1. .ovalHor {
2. background: #e5c3b2;
3. height: 40px;
4. width: 80px;
5. -moz-border-radius: 40px/ 20px;
6. -webkit-border-radius: 40px/ 20px;
7. border-radius: 40px/ 20px;
8. }

效果：

垂直椭圆

CSS Code:

1. .ovalVert {
2. background: #e5c3b2;
3. height: 80px;
4. width: 40px;
5. -moz-border-radius: 20px/ 40px;
6. -webkit-border-radius: 20px/ 40px;
7. border-radius: 20px/ 40px;
8. }

效果：

10、表图（chartColorful）

CSS Code:

1. .chartColorful {
2. height: 0px;
3. width: 0px;
4. border: 50px solid red;
5. border-color:purple red yellow orange;
6. -moz-border-radius: 50px;
7. -webkit-border-radius: 50px;
8. border-radius: 50px;
9. }

效果：

11、四分之一圆（quarterCircle）

四分之一圆（上）

CSS Code:

1. .quarterCircleTop {
2. background: #e5c3b2;
3. height: 50px;
4. width: 50px;
5. -moz-border-radius: 50px 0 0 0;
6. -webkit-border-radius: 50px 0 0 0;
7. border-radius: 50px 0 0 0;
8. }

效果：

四分之一圆（右）

CSS Code:

1. .quarterCircleRight {
2. background: #e5c3b2;
3. height: 50px;
4. width: 50px;
5. -moz-border-radius: 0 50px 0 0;
6. -webkit-border-radius: 0 50px 0 0;
7. border-radius: 0 50px 0 0;
8. }

效果：

四分之一圆（下）

CSS Code:

1. .quarterCircleBottom {
2. background: #e5c3b2;
3. height: 50px;
4. width: 50px;
5. -moz-border-radius: 0 0 50px 0;
6. -webkit-border-radius: 0 0 50px 0;
7. border-radius: 0 0 50px 0;
8. }

效果：

四分之一圆（左）

CSS Code:

1. .quarterCircleLeft {
2. background: #e5c3b2;
3. height: 50px;
4. width: 50px;
5. -moz-border-radius: 0 0 0 50px;
6. -webkit-border-radius: 0 0 0 50px;
7. border-radius: 0 0 0 50px;
8. }

效果：

12、Chart（quarterCircle）

Chart（上）

CSS Code:

1. .chartTop {
2. height: 0px;
3. width: 0px;
4. border: 50px solid #e5c3b2;
5. border-top-color:transparent;
6. -moz-border-radius: 50px;
7. -webkit-border-radius: 50px;
8. border-radius: 50px;
9. }

效果：

Chart（右）

CSS Code:

1. .chartRight {
2. height: 0px;
3. width: 0px;
4. border: 50px solid #e5c3b2;
5. border-right-color:transparent;
6. -moz-border-radius: 50px;
7. -webkit-border-radius: 50px;
8. border-radius: 50px;
9. }

效果：

Chart（下）

CSS Code:

1. .chartBottom {
2.      height: 0px;
3.      width: 0px;
4.      border: 50px solid #e5c3b2;
5.      border-bottom-color:transparent;
6.      -moz-border-radius: 50px;
7.      -webkit-border-radius: 50px;
8.      border-radius: 50px;
9. }

效果：

Chart（左）

CSS Code:

1. .chartLeft {
2. height: 0px;
3. width: 0px;
4. border: 50px solid #e5c3b2;
5. border-left-color:transparent;
6. -moz-border-radius: 50px;
7. -webkit-border-radius: 50px;
8. border-radius: 50px;
9. }

效果：

13、心形（heart）

左心形

CSS Code

1. .heartLeft {
2. width: 0;
3. height: 0;
4. border-color:red;
5. border-style:dotted;
6. border-width: 0 40px 40px 0;
7. }

效果：

右心形

CSS Code

1. .heartRight {
2. width: 0;
3. height: 0;
4. border-color:red;
5. border-style:dotted;
6. border-width: 0 0 40px 40px;
7. }

效果：

14、彩带（ribbon）

CSS Code

1. .ribbon {
2. width: 0;
3. height: 100px;
4. border-left: 50px solid red;
5. border-right: 50px solid red;
6. border-bottom: 35px solid transparent
7. }

效果：