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

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

 

　　实例分享

　　矩形

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 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 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 class="moon">

　　树叶

1 .leaf {
2     border-radius: 5px 300px 3px 300px;
3     background: #6DC75F;
4     width: 150px;
5     height: 150px;
6 }
7
8 class="leaf">