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; }
其他图形都是根据以上图形展开思维的...