css3锯齿

左右锯齿
先写一个div例如<div class="sawtooth">你好。这是一个 div 元素。</div>
接着用纯css3写锯齿
.sawtooth {
    /* 相对定位，方便让before和after伪元素绝对定位偏移 */
    position: relative;
    /* 把超出p的部分隐藏起来 */
    overflow: hidden;
}
 
.sawtooth:before, .sawtooth:after {
    content: ' ';
     0;
    height: 100%;
    /* 绝对定位进行偏移 */
    position: absolute;
    top: 10px;
}
 
.sawtooth:before {
    /* 圆点型的border */
    border-right: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖p */
    left: -5px;
}
 
.sawtooth:after {
    /* 圆点型的border */
    border-left: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖p */
    right: -5px;
}
 
上线锯齿

<div></div>


div{
             400px;
            height: 400px;
            background-color: red;
            padding: 20px 0;
            overflow: hidden;
            position: relative;
        }
        div:after,div:before{
            content: '';
            display: block;
             100%;
            position: absolute;
            border-top: 10px dotted yellow;
            transform:translateY(-50%);
        }
        div:after{
            top:0;
            transform:translateY(-50%);
        }
        div:before{
            bottom: 0;
            transform:translateY(50%);
        }