为 div 制作 4 个锯齿形边框

Question

我怎样才能使something like this，但在边界的所有 4 侧（顶部、右侧、左侧、底部）？

Answer 1

.zigzag {
    position: relative;
    padding: 4px 4px 20px 4px;
    background: lightgray;
}

div>div {
  text-align: center;
  height: 200px;
}

.zigzag:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

<div class="zigzag">
    <div>ZigZag</div>
</div>