[转]利用css3样式画各种图形

本文来自互联网：http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html

利用css画图形，是个有利有弊的写法，好处是不用画图，且节省了一些流量，坏处是要写长串的css样式，而且有可能流量并没有减少，用与否视情况而定，个人选择。

下面是我做测试的一些图形，也是参考了一些网站，简单的注解一下和归纳了一下，其中并没涉及到复杂的css画图形。

其中用了css3.0的一些属性，所以这里声明：请用支持css3.0的浏览器看此文章！

正方形

矩形

梯形

平行四边形

上面这几个相对比较简单,没什么可解释的,看下面源码：

/*正方形*/ .Square { width: 100px; height: 100px; background: #669; }/*矩形*/ .rectangle { width: 200px; height: 100px; background: #669; }/*梯形*/ .trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }/*平行四边形*/ .parallelogram { width: 150px; height: 100px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }

向上三角

向下三角

向左三角

向右三角

左上三角

右上三角

左下上三角

右下上三角

上下三角

上面这些三角，其实也很常见，主要原理是利用了相邻两个边框的接壤处分配原则，如果没有宽度和高度的话，其实应该是四个三角形接成的矩形，下面是上面图形的源码：

/*三角形*/ .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669; } .triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669; } .triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #669; border-bottom: 50px solid transparent; } .triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #669; border-bottom: 50px solid transparent; } .triangle-updown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669;position:relative;margin-bottom:50px} .triangle-updown:after {content:" "; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669;position:absolute;top:50px;left:-50px;}  .triangle-topleft { width: 0; height: 0; border-top: 100px solid #669; border-right: 100px solid transparent; } .triangle-topright { width: 0; height: 0; border-top: 100px solid #669; border-left: 100px solid transparent; } .triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid #669; border-right: 100px solid transparent; } .triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid #669; border-left: 100px solid transparent; }

看下面例子，清楚的标明了，四个边的情况，上面的三角形都是利用了这个原理，让不想显示的边框透明transparent：

<div style="border-left:50px solid #060;border-right:50px solid #600;border-bottom:50px solid #f00;border-top:50px solid #00f;width:0px;height:0px;">