Дизайн · утилита · Локально
CSS Clip Path Generator
Редактируйте вершины мышью, клавиатурой или координатами. Четыре шаблона, локальное копирование объявления clip-path или полного CSS.
Путь задачи / от ввода к результату
Выберите исходную фигуру
Работает локально · Ничего не загружается на сервер
Сравните четыре многоугольника и повторите настройки в рабочей области. В каждом превью используется тот же многоугольник, что и в CSS. Начальный размер экспортируемого блока — 240 × 180 px.
Изменить настройки в рабочей областиИспользуйте шестиугольник для аватара команды или ряда значков.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}Попробуйте наклонный ромб для небольшой картинки или украшения.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}Используйте наклонную фигуру с четырьмя вершинами для оформления карточки.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}Направьте край баннера к следующему разделу.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}Возьмите CSS любой формы выше и добавьте эти правила после него. Замените путь к изображению и альтернативный текст своими. Блок сохраняет пропорции 4:3; object-fit: cover обрезает изображение для заполнения без растяжения. Процентные координаты следуют за размером блока.
<img class="clipped-shape"
src="/your-image.jpg"
alt="Опишите изображение"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}Доступны четыре шаблона и два ползунка. Свободное редактирование вершин, импорт SVG-путей и кривые не поддерживаются. Для сохранения настроенного правила используйте копирование CSS или загрузку .css в рабочей области.
Путь задачи / от ввода к результату
Выберите шестиугольник, ромб, параллелограмм или шеврон. Два ползунка меняют шаблон; правка вершины включает произвольный многоугольник.
Перетаскивайте вершины или вводите координаты. Стрелки перемещают вершину в фокусе на 1%, Shift + стрелка — на 10%. Добавление вставляет середину ребра после выбранной вершины.
Полный пример содержит выбранный цвет, ширину 240px и пропорции 4:3. Редактор подстраивается под экран.
Проверьте рёбра перед экспортом. Нумерованные маркеры нужны только для редактирования и не входят в CSS.
Вывод CSS: Только объявление clip-path / Полный пример CSS. Полный пример содержит выбранный цвет, ширину 240px и пропорции 4:3. Редактор подстраивается под экран.
Процентные координаты масштабируются с элементом. Вставьте объявление в правило или используйте .clipped-shape. Проверьте настольную и мобильную версии.
Генератор CSS clip-path использует проверенный путь локального выполнения и не создаёт скрытую историю ввода и вывода.
Работает внутри текущей вкладки браузера.
Активные данные инструмента никогда не становятся записями документов Toolars.
Используйте основной сценарий без создания профиля. Избранное синхронизируется с аккаунтом после входа.
Закройте вкладку — и рабочие данные исчезнут.
В локальном браузерном тесте 2026-09-24 начните с Шестиугольник по умолчанию (горизонталь 24 %, вертикаль 50 %). Выберите точку 1, измените X с 24 % на 30 % и задайте цвет #ff6600. Предпросмотр покажет оранжевый многоугольник из шести точек с clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); порядок остальных пяти точек сохранится.
Полный CSS содержит .clipped-shape с шириной 240px, пропорцией 4 / 3, фоном #ff6600, -webkit-clip-path и clip-path. Скопированный текст совпал со скачанным toolars-clip-path.css (240 байт). В режиме одного объявления копировалось точно clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); (73 байта UTF-8). Проверьте обрезку в своём макете.
Задайте X точки 1 равным 101 %. В тесте 2026-09-24 редактор сообщил, что координаты должны быть конечными числами от 0 до 100 %; предпросмотр и CSS исчезли, копирование и скачивание отключились. X = 30 % возвращает polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%). Пересекающиеся рёбра автоматически не исправляются.
Начните с четырёх шаблонов, добавляйте, удаляйте или перемещайте вершины. Экспортируйте объявление clip-path или полный пример CSS. Процентные координаты масштабируются с элементом. Вставьте объявление в правило или используйте .clipped-shape. Проверьте настольную и мобильную версии.
Частые вопросы