SOURCE

<div class="sawtooth" style="background:#e24141;width:400px;height:170px;"></div>

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

.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;
}