Генератор CSS Clip-Path
Создайте объявление CSS clip-path — окружность, эллипс, inset или форму полигона (треугольник, шестиугольник, звезда, стрелка и многое другое) со списком настраиваемых точек, редактируемым вручную — с живым просмотром обрезанной формы.
Ввод
Выберите базовую форму или предустановку полигона, или выберите «Пользовательский полигон» для редактирования вершин вручную.
Вывод
Ваша обрезанная форма появится здесь.
Div с встроенными стилями, соответствующими предпросмотру выше — вставьте в любое место.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-clip-path-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"shapeType": "circle",
"circleRadius": "50",
"circleCx": "50",
"circleCy": "50"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-clip-path-generator` tool (CSS Clip-Path Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-clip-path-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS Clip-Path — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое clip-path?
clip-path — это свойство CSS, которое скрывает всё за пределами определённой вами формы, оставляя видимой только часть внутри — не требуется графический редактор, файл маски или дополнительная разметка. Вот как вы можете получить круговые аватары, шестиугольные значки, наклонные разделители секций, кнопки в форме стрелки и всплывающие окна с речевыми пузырями, используя только CSS на обычном <div> или <img>.
Этот инструмент создаёт готовое к использованию объявление clip-path из средства выбора формы с живым просмотром того, что именно производит CSS.
Как использовать этот инструмент
- Выберите Форму — базовую форму (Окружность, Эллипс, Inset) или одну из предустановок полигонов (Треугольник, Ромб, Пятиугольник, Шестиугольник, Восьмиугольник, Звезда, Сообщение, Стрелка, Крест, Шеврон, Параллелограмм, Трапеция).
- Отрегулируйте:
- Окружность — Радиус и Центр X/Y, всё как проценты от собственного размера элемента.
- Эллипс — независимые Радиус X/Y плюс Центр X/Y.
- Inset — Смещения Сверху/Справа/Снизу/Слева (на сколько каждый край отступает от края блока) плюс опциональный Радиус углов для скруглённых прямоугольников.
- Предустановки полигонов — это фиксированные формы — выберите Пользовательский полигон, чтобы вместо этого вручную редактировать список вершин (см. ниже).
- Для Пользовательского полигона отредактируйте поле Точки полигона: список, разделённый запятыми, пар
x% y%, по одной на вершину, обходя форму по порядку (минимум 3). Каждая предустановка полигона выше — это просто один из этих списков под капотом — скопируйте координатыpolygon(...)выходных данных предустановки сюда как отправную точку, если вы хотите настроить одну. - Скопируйте CSS и применяйте к любому элементу —
clip-pathработает на изображениях, div-ах, кнопках, чём угодно с блоком. Предпросмотр показывает ровно то, как это выглядит; HTML-фрагмент ниже — это та же разметка что самостоятельный, встроенно оформленный<div>, который вы можете вставить в любое место, где таблица стилей неудобна.
Почему оба clip-path и -webkit-clip-path?
Свойство clip-path без префикса поддерживается всеми современными браузерами, но форма с префиксом -webkit- включена рядом для старых браузеров на основе WebKit, которые распознавали только версию с префиксом — дешёвая строка совместимости, которая ничего не стоит на современных браузерах.
FAQ
Могу ли я анимировать clip-path?
Да — clip-path анимируемо, поэтому переход между двумя значениями одного типа формы (например, два polygon()s с одинаковым количеством точек или два радиуса circle()) анимируется гладко обычным CSS transition. Этот инструмент генерирует одно статическое значение; добавьте свой собственный transition: clip-path 0.3s ease; рядом с ним.
Нужны ли всем вершинам полигона %?
Этот инструмент всегда выдаёт проценты, которые масштабируются с размером самого элемента (наиболее портативный выбор). Вы можете вручную отредактировать скопированный CSS, чтобы использовать px, если вместо этого вам нужна форма фиксированного размера.
Почему проценты полигонов для предустановки Звезда выглядят "неправильно"? 10-точечная звезда имеет точки, чередующиеся между внешним радиусом и более коротким внутренним радиусом от центра формы — проценты не предназначены для единообразного вида, они трассируют шипы и внутренние зубцы звезды.
Влияет ли clip-path на области клика/наведения?
Нет — щелчок вне видимой обрезанной области всё ещё попадает в исходный (необрезанный) блок элемента в большинстве браузеров, если вы не ограничиваете события указателя самостоятельно (например, pointer-events: none плюс обрезанное наложение, или переработка макета так, чтобы блок БЫЛ формой).
Конфиденциальность
Всё происходит в вашем браузере. Выбранная вами форма и параметры никогда не отправляются на сервер — CSS и предпросмотр генерируются и обновляются локально при изменении элементов управления.