如何基于纯CSS创建各种图形形状

　　CSS也称作层叠样式表，用于控制网页内容显示情况，它可以控制HTML无法控制的许多属性，利用CSS能实现多种多样的动画效果，之前我们分享过很多CSS3实现的特效、动画及一些游戏，今天再来教大家学习如何使用简单的CSS创建不同类型的平面图形。

　　实例分享

　　矩形

word-wrap: break-word; background-image: none !important; position: static !important; padding: 0px !important; line-height: 1.1em !important; outline-style: none !important; outline-width: 0px !important; width: auto !important; bottom: auto !important; float: none !important; height: auto !important; font-size: 10pt !important; vertical-align: baseline !important; top: auto !important; right: auto !important; left: auto !important;">

---

1	.rectangle {

---

2	width: 250px;

3	height: 150px;

4	background-color: #6DC75F;

5

}

6

7

　　三角形

1	.triangleUp {

2	border-left: 75px solid transparent;

3	border-right: 75px solid transparent;

4	border-bottom: 150px solid  #6DC75F;

5

width: 0;

6	height: 0;

7

}

8

9	<div class="triangleUp">

　　椭圆形

01

.oval {

02	width: 300px;

03	height: 150px;

04	background: #6DC75F;

05	-moz-border-radius: 150px / 75px;

06	-webkit-border-radius: 150px / 75px;

07	border-radius: 150px / 75px;

08

}

09

10	<div class="oval">

　　月牙形

1

.moon {

2	width: 150px;

3	height: 150px;

4	border-radius: 50%;

5	box-shadow: 15px 15px 0 0 GREEN;

6

}

7

8	<div class="moon">

　　树叶

1

.leaf {

2	border-radius: 5px 300px 3px 300px;

3	background: #6DC75F;

4	width: 150px;

5	height: 150px;

6

}

7

8	<div class="leaf">