使用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;
}
