Make 4 zigzag borders for div

Question

how can I make something like this, but on all 4 sides of the border (top, right, left, bottom)?

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>