About sawtooth
The first to write a div for example <div class = "sawtooth"> Hello. This is a div element. </ Div>
Then write jagged with pure 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;
}
On-line zigzag
<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%); }