纯CSS制作各种图形

Square(正方形)

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

Rectangle(矩形)

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

Circle(圆形)

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

可以使用百分比值(大于50%)，但是低版本的Android不支持

Triangle Up(向上的三角形)

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

Triangle Down(向下)

1. #triangle-down {
2. width: 0;
3. height: 0;
4. border-left: 50px solid transparent;
5. border-right: 50px solid transparent;
6. border-top: 100px solid red;
7. }

Triangle Left(向左)

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

Triangle Right(向右)

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

Triangle Top Left(左上)

1. #triangle-topleft {
2. width: 0;
3. height: 0;
4. border-top: 100px solid red;
5. border-right: 100px solid transparent;
6. }

Triangle Top Right(右上)

1. #triangle-topright {
2. width: 0;
3. height: 0;
4. border-top: 100px solid red;
5. border-left: 100px solid transparent;
6. }

Triangle Bottom Left(左下)

1. #triangle-bottomleft {
2. width: 0;
3. height: 0;
4. border-bottom: 100px solid red;
5. border-right: 100px solid transparent;
6. }

Triangle Bottom Right(右下)

1. #triangle-bottomright {
2. width: 0;
3. height: 0;
4. border-bottom: 100px solid red;
5. border-left: 100px solid transparent;
6. }