Как сделать неровные границы карточек

Неровные или фигурные границы карточек можно сделать с помощью CSS-свойства clip-path. Оно позволяет обрезать блок или карточку по любой форме — от круга и эллипса до сложной кастомной фигуры.

Чтобы не писать код, вы можете собрать готовую форму для обрезки блока в специальном сервисе, а потом вставить готовое значение в редактор Taptop с помощью Пользовательских свойств (подробнее —

Шаг 1. Подготовьте карточку в редакторе Taptop

Выберите карточку или блок (например, Div-блок или Image), которому хотите задать неровные границы.

Шаг 2. Создайте форму для обрезки и получите код

Для создания произвольной фигуры удобно использовать внешний сервис, например Clip Path Maker (Clippy).

Выберите любую готовую форму — круг, эллипс, многоугольник, октагон и т.д.

При желании подвигайте точки и вручную настройте контур.

Получите готовый CSS-код внизу экрана и скопируйте значение clip-path — то, что написано после «clip-path:» и без точки с запятой в конце. Например, polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)

Координаты указываются в процентах, поэтому форма будет масштабироваться вместе с блоком.

Шаг 3. Добавьте clip-path в Taptop

Вернитесь в редактор Taptop и проверьте, что выделена нужная карточка.

В правой панели на вкладке Дизайн найдите раздел Пользовательские свойства и нажмите на «+», чтобы добавить новое свойство.

В поле Свойство выберите clip-path.

В поле Значение вставьте скопированное значение из генератора.

Что важно учитывать

Если форма создавалась под другой размер блока, визуально она может выглядеть немного иначе. Это связано с тем, что clip-path работает в процентах.

В таком случае можно либо изменить размеры карточки, либо подправить форму в генераторе.

Резюме

Такой способ позволяет делать неровные и фигурные границы карточек без сложной верстки. Прием хорошо подходит для акцентных блоков, карточек преимуществ, кейсов и промо-секций, где важна визуальная выразительность и нестандартная форма.