CSS-эффекты и графика

Зубчатые и волнистые рамки

Край блока превращается в зигзаг, волну или полукруглые фестоны одной маской — без картинок, псевдоэлементов и лишней разметки.

Загрузить пример

Заготовки

Настройки

Форма края

Треугольные зубцы — «билет», «купон», край почтовой ленты.

Какие стороны резать

Сверху Справа Снизу Слева

Зубцов по стороне: 12 Глубина: 8 % от стороны Цвет блока

Превью

Блок с зубчатым краем.
Содержимое остаётся обычным.

Маска не режет вёрстку: внутри остаётся обычный блок — можно класть текст, картинку или видео.

CSS

.zigzag {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M%200%200%20L%20100%200%20L%20100%20100%20L%2095.83%2092%20L%2091.67%20100%20L%2087.5%2092%20L%2083.33%20100%20L%2079.17%2092%20L%2075%20100%20L%2070.83%2092%20L%2066.67%20100%20L%2062.5%2092%20L%2058.33%20100%20L%2054.17%2092%20L%2050%20100%20L%2045.83%2092%20L%2041.67%20100%20L%2037.5%2092%20L%2033.33%20100%20L%2029.17%2092%20L%2025%20100%20L%2020.83%2092%20L%2016.67%20100%20L%2012.5%2092%20L%208.33%20100%20L%204.17%2092%20L%200%20100%20L%200%200%20Z%22%20fill=%22%23000%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M%200%200%20L%20100%200%20L%20100%20100%20L%2095.83%2092%20L%2091.67%20100%20L%2087.5%2092%20L%2083.33%20100%20L%2079.17%2092%20L%2075%20100%20L%2070.83%2092%20L%2066.67%20100%20L%2062.5%2092%20L%2058.33%20100%20L%2054.17%2092%20L%2050%20100%20L%2045.83%2092%20L%2041.67%20100%20L%2037.5%2092%20L%2033.33%20100%20L%2029.17%2092%20L%2025%20100%20L%2020.83%2092%20L%2016.67%20100%20L%2012.5%2092%20L%208.33%20100%20L%204.17%2092%20L%200%20100%20L%200%200%20Z%22%20fill=%22%23000%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

Тот же зигзаг через clip-path

Зигзаг состоит из отрезков, поэтому его можно записать и многоугольником — короче и без data-URL. У волны и фестонов кривые, и такой записи для них не существует.

.zigzag {
  clip-path: polygon(100% 0%, 100% 100%, 95.83% 92%, 91.67% 100%, 87.5% 92%, 83.33% 100%, 79.17% 92%, 75% 100%, 70.83% 92%, 66.67% 100%, 62.5% 92%, 58.33% 100%, 54.17% 92%, 50% 100%, 45.83% 92%, 41.67% 100%, 37.5% 92%, 33.33% 100%, 29.17% 92%, 25% 100%, 20.83% 92%, 16.67% 100%, 12.5% 92%, 8.33% 100%, 4.17% 92%, 0% 100%, 0% 0%);
}