CSS3：绘制图形

CSS画图形，基本上所有的实现都是对边框的角度的调整及组合。

以下不包含兼容浏览器的前缀，请使用时在border-radius前加-moz-、-webkit- ....

1、正常得不得了的矩形

        .square{
            width:200px;
            height:100px;
            background: red;
        }

2、圆形，边宽为圆半径，4个扇形为一个圆，调整border-radius:50px 0 0 0;可得出不同方向的扇形

        /*圆形*/
        .circle{
            width:100px;
            height:100px;
            background: red;
            border:1px solid red;
            border-radius:50px;
        }
        /*半圆*/
        .semicircle{
            width:100px;
            height:50px;
            background: red;
            border-radius: 100px 100px 0 0;
        }
        /*扇形*/
        .fan{
            width:50px;
            height:50px;
            background: red;
            border-radius: 100px 0 0 0;
        }
        /*吃豆豆*/
        .eatman{
            width: 0;
            height: 0;
            border:50px solid red;
            border-radius: 50px;
            border-color:red transparent red red ;
        }

3、椭圆形，水平半径100/垂直半径50

        .oval{
            width:200px;
            height:100px;
            background: red;
            border:1px solid red;
            border-radius: 100px/50px;
        }

4、三角形，设置了内容区高宽为0，就可以看到三角形，不同角度的三角形原理都是一样的，border-color顺序是：上右下左

       .triangle{
            width:0;
            height:0;
            border:50px solid red;
          border-color: transparent transparent red transparent;
        }

5、平行四边形，利用的是transform的变形效果

        .parallelogram{
            width: 150px;
            height: 100px;
            transform: skew(20deg);
            background: red;
        }

其他图形都是根据以上图形展开思维的...