css图片锯齿,CSS 锯齿实现

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

左右锯齿实现

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

}