Программа обрезки углов CSS
Создайте объявление CSS clip-path/mask, которое срезает, вырезает или скругляет каждый угол блока независимо — для каждого угла или одного связанного стиля и размера, в пиксельях или %, с живым предпросмотром.
Ввод
Единица размера для каждого обреза угла ниже.
Когда включено, стиль и размер Все Углы применяются к каждому углу.
Размеры более 50% ограничиваются, чтобы противоположные углы не перекрывались.
Вывод
Ваш блок с обрезанными углами появится здесь.
div с встроенными стилями, соответствующий предпросмотру выше — вставьте куда угодно.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-corner-cutter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"unit": "px",
"linked": "true",
"allStyle": "bevel",
"allSize": "24"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-corner-cutter` tool (CSS Corner Cutter) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-corner-cutter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Программа обрезки углов CSS — 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 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое "обрезанный" угол?
border-radius создает только гладко скругленные углы. Обрезанный угол — это что-то другое: он удаляет клин материала из блока вместо того, чтобы его закруглять, и есть три распространенные формы для этого клина:
- Скос — одна косая линия, классический вид "обрезанного угла" на карточках, кнопках и ценниках.
- Вырез — срез под прямым углом, дающий силуэт вкладки/талона со скошенными углами.
- Скругление — вогнутая дуга, изгибающаяся внутрь от угла, как укус, вырванный из него.
Эта программа создает готовое объявление CSS для любой комбинации этих трех вариантов, независимо для каждого угла, с живым предпросмотром.
Как использовать эту программу
- Выберите Единицу измерения (
pxили%) — она применяется к размеру каждого угла ниже. - Оставьте Одинаково для всех углов включенным, чтобы установить один Стиль и Размер для всех четырех углов сразу, или отключите его, чтобы установить каждый угол (Верхний левый угол, Верхний правый угол, Нижний правый угол, Нижний левый угол) независимо — свободно смешивайте скосы, вырезы и скругления, или оставьте размер угла на
0, чтобы сохранить его квадратным. - Скопируйте CSS и примените его к любому элементу с определенной шириной/высотой. Предпросмотр показывает ровно то, как это выглядит; HTML-фрагмент ниже — это та же разметка, что и автономный
<div>со встроенными стилями, который вы можете вставить в любое место, где таблица стилей неудобна.
Почему два разных метода CSS?
Скос и вырез — оба сделаны из прямых линий, поэтому они выражаются как дополнительные точки в clip-path: polygon(...) — тот же метод, используемый библиотекой фигур Программы создания CSS Clip-Path. Скругление — это другое: clip-path polygon() может только рисовать прямые края между точками, поэтому нет способа плавно изогнуть один внутрь. Вырезание вогнутой кривой требует mask-image, построенного из radial-gradients — один на угол, прозрачный внутри радиуса среза и непрозрачный снаружи. Поскольку clip-path и mask — независимые свойства, которые оба применяются к одному элементу, эта программа выводит оба блока вместе всякий раз, когда вы смешиваете прямые срезы на некоторых углах с скруглением на других; браузер отображает их пересечение.
FAQ
Это будет работать в каждом браузере?
clip-path: polygon() и mask-image широко поддерживаются в современных браузерах Chrome, Firefox, Safari и Edge. Созданный CSS всегда включает форму с префиксом -webkit- любого используемого свойства, так как Safari исторически требовал его для mask-image.
Почему мое скругление, размер которого в процентах, меньше, чем я ожидал?
Размеры в процентах ограничены 50, чтобы срезы противоположных углов не перекрывались.
Я просто хочу простые скругленные углы, не срез — что мне использовать?
Это border-radius, не срез — вместо этого используйте Программу создания Border Radius. Если вы скругляете углы фактического изображения, которое вы загрузили (вместо создания CSS для живого блока), используйте Round Corners.
Конфиденциальность
Все происходит в вашем браузере. Выбранные вами стили и размеры никогда не отправляются на сервер — CSS и предпросмотр генерируются и обновляются локально по мере того, как вы регулируете элементы управления.