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

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

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

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

Заготовки

Настройки

Форма края

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

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

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

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

Превью

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

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

CSS

.zigzag {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 L 100 0 L 100 100 L 95.83 92 L 91.67 100 L 87.5 92 L 83.33 100 L 79.17 92 L 75 100 L 70.83 92 L 66.67 100 L 62.5 92 L 58.33 100 L 54.17 92 L 50 100 L 45.83 92 L 41.67 100 L 37.5 92 L 33.33 100 L 29.17 92 L 25 100 L 20.83 92 L 16.67 100 L 12.5 92 L 8.33 100 L 4.17 92 L 0 100 L 0 0 Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 L 100 0 L 100 100 L 95.83 92 L 91.67 100 L 87.5 92 L 83.33 100 L 79.17 92 L 75 100 L 70.83 92 L 66.67 100 L 62.5 92 L 58.33 100 L 54.17 92 L 50 100 L 45.83 92 L 41.67 100 L 37.5 92 L 33.33 100 L 29.17 92 L 25 100 L 20.83 92 L 16.67 100 L 12.5 92 L 8.33 100 L 4.17 92 L 0 100 L 0 0 Z' fill='%23000'/%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%);
}