css3锯齿

左右锯齿

先写一个div例如<div class="sawtooth">你好。这是一个 div 元素。</div>

接着用纯css3写锯齿

.sawtooth {

    /* 相对定位，方便让before和after伪元素绝对定位偏移 */

    position: relative;

    /* 把超出p的部分隐藏起来 */

    overflow: hidden;

}

 

.sawtooth:before, .sawtooth:after {

    content: ' ';

    width: 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{
            width: 400px;
            height: 400px;
            background-color: red;
            padding: 20px 0;
            overflow: hidden;
            position: relative;
        }
        div:after,div:before{
            content: '';
            display: block;
            width: 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%);
        }