锯齿图形绘制

html：

<header>CSS3 linear gradient</header>

css：

body {    background-color: #fff;    margin: 0;}header {                width: 100%;    height: 220px;    line-height: 220px;    color: #fff;    font-size: 4.5em;    text-align: center;    background-color: #d35400;    /*制作锯齿*/    background-image: linear-gradient(45deg,#ff0 50%, transparent 50%);    background-size: 30px 30px;    background-repeat: repeat-x;/*X轴水平方向重复*/    background-position: 0 100%;/*锯齿显示在页面最底部*/}

解析：首先在代码中创建了一个30*30的背景图案，绘制线性渐变。渐变的角度为45度，也即使能够形成斜角的角度。渐变的位置点为50%，即中点，在中点之前背景为透明，后背景为黄色#FF0。我们通过设置background-repeat属性为repeat-x，使得该背景图案仅在水平方向重复，而不是铺满整个header。通过设置背景位置的bottom参数为100%,背景图案将显示在header最底部。
现在我们生成的斜角仅为锯齿的左半侧，为了给右半侧腾出空间，我们需要将渐变中白色区域的大小减半，只需要将渐变的位置点从50%修改为25%即可；如下图：

css：

header {    background-image: linear-gradient(45deg,#ff0 25%, transparent 25%);}

然后绘制右半侧锯齿：

css：

header {    background-image: linear-gradient(45deg,#ff0 25%, transparent 25%), /*左侧黄色（#ff0）锯齿*/                      linear-gradient(-45deg,#0f0 25%, transparent 25%); /*右侧绿色（#0f0）锯齿*/}

最后将颜色改为白色：

css：

header {    background-image: linear-gradient(45deg,#fff 25%, transparent 25%), /*左侧黄色（#ff0）锯齿*/                      linear-gradient(-45deg,#fff 25%, transparent 25%); /*右侧绿色（#0f0）锯齿*/}