左右锯齿
先写一个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%);
}原文：https://www.cnblogs.com/hlhs/p/11944588.html