分类： 系统运维
2012-10-08 16:23:44
面试图如下：不用任何图片，实现这个效果：
不用图片来实现不规则图形的效果，首先想到的是使用border。先把代码送上：
代码十分简单，关键是为什么要使用border，怎么使用border。为了简单易见，我们先做一个宽高都为200px，边为50px宽，并且四边颜色不一样的div。注意看各个边的交接处。
从这个图不难看出，1：交接处是斜边，如果把各个边的粗细发生变化，倾斜的角度也会有所不同。
2：如果把内容部分的宽、高、padding都设置为0；则每个单边都是一个三角形。
3：理论上可以用边框可以拼成任何的几何图形（使用position定位的情况下）
下面是两个边框做成的图形的例子。
效果如下：
再来一个效果：
（注：因为用了比较偷懒的方法两个三角形叠压，使用透明边框，ie6不支持，或者使用3个div从上往下排液比较简单）
