在制作网页的时候我们为了增添页面的美观性，会在页面中添加一些图案或者将页面部分区块设置为特殊形状.
如果全部使用图片会使页面体积增大，造成加载速度慢等问题,那么怎样使用div+css实现一些简单的图形绘制呢？
在div+css布局时，我们一般是在页面中绘制一个个矩形，然后使用浮动来控制页面中矩形所在的位置
代码如下：
.juxing {
width: 500px;
height: 100px;
}
需要用css绘制一个简单的小三角形
代码如下：
.csssanjiaoxing {
width: 0;
height: 0;
border-bottom: 140px solid #f335f7;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
圆形图形代码：
.yuanxing {
width: 180px;
height: 180px;
background: #f335f7;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
border-radius: 90px;
}
css实现棱形绘制：
.lengxing {
width: 180px;
height: 180px;
background: #f335f7;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin: 60px 0 10px 310px;
}
除了上述代码，还可以使用在本站站长工具栏目中的css形状生成工具，来预览以及获取各种常见图形的css代码
我们只需要在页面中打开它，然后选择一个自己需要的图形，程序会自动显示该图形的css代码
将代码复制到页面css文件中，然后将.cssshape替换为需要变为特殊形状的div类名称或id名称，如果是指定id的div则替换为为#XXXX。
