Как пользоваться: Зигзаг-граница CSS
- Предпросмотр начинается с зигзагообразного нижнего края; задайте число зубцов с помощью Repeats.
- Выберите Scallops для закруглённых зубцов или Steps для ступенек.
- Выберите Both, чтобы получить вид чека или билета.
- Скопируйте CSS.
Зубчатые края с clip-path
Каждый зубец задаётся двумя точками полигона: одна лежит на краю, другая смещена внутрь на глубину зубца. Так как положения по оси X заданы в процентах, зубцы всегда занимают всю ширину. Чтобы зубцы сохраняли высоту, задайте глубину в пикселях. Для вида чека вырежьте оба края с небольшой глубиной и большим количеством повторов.
Другие формы краёв есть в Section Divider Generator.
Также ищут как: зигзаг border css, clip-path зигзаг.
Инструменты, которые хорошо сочетаются с Зигзаг-граница CSS
- Наклонная секция CSS — Создавайте наклонные, скошенные или диагональные секции — популярный вид лендингов — одним правилом clip-path.
- Изогнутый разделитель секций — Скруглите край hero-блока или секции с помощью изгиба — выпуклого, вогнутого, изогнутого угла, плавной волны или скаллопов — только средствами CSS.
- Генератор CSS-треугольников — Создайте треугольник на чистом CSS для стрелки подсказки, указателя выпадающего меню или облачка речи: выберите одно из 8 направлений, ширину, высоту и цвет, а затем скопируйте либо классический приём с border, либо более простую версию на clip-path.
- Генератор CSS Clip-path — Обрежьте изображения и элементы в любую форму: выберите одну из 15 стартовых фигур — треугольник, шестиугольник, звезда, стрелка, шеврон, речевой пузырь, круг, эллипс, скругленный inset… — и перетащите точки по примеру или своему изображению.
Часто задаваемые вопросы
Как сделать зубчатый край в CSS?
Используйте clip-path: polygon() с точками, которые по ширине чередуются между краем и глубиной выреза. Выберите здесь Zigzag, задайте количество повторов и скопируйте CSS.
Можно ли сделать край порванного чека?
Да: выберите Zigzag, край Both, небольшую глубину (8–12 px) и 20 или более повторов.
Как сохранить одинаковый размер зубцов на широких экранах?
Количество зубцов фиксировано, поэтому на широких экранах они становятся шире. Для фиксированной ширины зубца используйте повторяющуюся маску с conic-gradient или увеличьте количество зубцов для десктопа через медиазапрос.
Можно ли установить Зигзаг-граница CSS как веб-приложение и пользоваться им офлайн?
Да. Зигзаг-граница CSS — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.