锯齿图形绘制

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）锯齿*/
}