Зигзаговый border в CSS

Нужно сделать зигзаговую границу блока (из треугольников).
Как это лучше реализовать?

Ответ

.zig-zag { background: #1ba1e2; position: relative; } .zig-zag:after { background: linear-gradient(-45deg, transparent 20px, #1ba1e2 0), linear-gradient( 45deg, transparent 20px, #1ba1e2 0); background-position: left bottom; background-size: 20px 20px; content: ""; display: block; height: 20px; width: 100%; position: absolute; } /* Просто оформление, для зиг-зага не нужно */ body { margin: 0; } h1 { color: #fff; font-family: Arial; margin: 0; padding: 15px; text-align: center; }

Рамка зубцами