用CSS3特性直接绘图，半圆角，三角形，圆形等

1.三角形：

可以利用CSS绘制三角形，这样就不用通过背景图片实现：

（1）代码如下（实现的是下箭头三角）

  .div2{

    width:0px;

    height:0px;

    border-color:black;

    border-left:50px solid transparent;

     border-right:50px solid transparent;

    border-top:100px solid black;    

   }

效果如下：

（2）代码如下（实现的是上三角）

.div2{

    width:0px;

    height:0px;

    border-color:black;

    border-left:50px solid transparent;

     border-right:50px solid transparent;

    border-bottom:100px solid black;     

  }

效果如下：

（3）如果要实现三角形的旋转，则有：附加代码

-webkit-transform: rotate(40deg);

这样就可以实现三角形的旋转

2.半圆角

CSS3中可以实现圆角形式，比如说：

增加了属性：border-radius: 15px;

效果如下：

圆角的CSS2中实现：

分为（1）宽度固定，高度自适应，这种形式的CSS2圆角布局，

可以利用背景图片上下切图可以得到；

（2） 高度和宽度都是自适应的；

（3）border-radius属性：

此外，最后送上一个定制CSS3图形的网站，可以定制梯形，圆形，弧形等，

http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet