CSS 锯齿实现

使用before和after伪元素的border实现 左右和上下锯齿，

<div style="background:#82D9FF;width:100%;height:100%;">
  <div class="sawtooth"></div>
</div>

左右锯齿实现

.sawtooth {
    /* 相对定位，方便让before和after伪元素绝对定位偏移 */
    position: relative;
    /* 把超出div的部分隐藏起来 */
    overflow: hidden;

    background:#FFFFFF;
    width:16.75rem;
    height:6rem;
}

.sawtooth:before, .sawtooth:after {
    content: ' ';
    width: 0;
    height: 100%;
    /* 绝对定位进行偏移 */
    position: absolute;
    top: 10px;
}

.sawtooth:before {
    /* 圆点型的border */
    border-right: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖div */
    left: -5px;
}

.sawtooth:after {
    /* 圆点型的border */
    border-left: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖div */
    right: -5px;
}

设置上下锯齿

.sawtooth {
    /* 相对定位，方便让before和after伪元素绝对定位偏移 */
    position: relative;
    /* 把超出div的部分隐藏起来 */
    overflow: hidden;

    background:#FFFFFF;
    width:16.75rem;
    height:6rem;

}

.sawtooth:before, .sawtooth:after {
    content: " ";
    width: 100%;
    height: 0px;
    position: absolute;

}

.sawtooth:before {
    /* 圆点型的border ，颜色要和父视图的背景颜色一致*/
    border-top: 10px dotted #82D9FF;
    /* 偏移一个半径，让圆点的一半覆盖div */
    left: 10px;
    top: -4px;

}

.sawtooth:after {
    /* 圆点型的border */
    border-bottom: 10px dotted #82D9FF;
    /* 偏移一个半径，让圆点的一半覆盖div */
    right: -10px;
    bottom: -4px;
}