Генератор CSS clip-path

Что такое Генератор CSS clip-path?

Генератор CSS clip-path — это бесплатный визуальный редактор свойства CSS clip-path для фронтенд-разработчиков и дизайнеров, которым нужно обрезать элементы в непрямоугольные формы. Выберите пресет из выпадающего списка: circle() и ellipse() с радиусом и центральной точкой, polygon() с любым количеством вершин, inset() с четырьмя отступами от краёв или скруглённый вариант inset() с радиусом угла. Каждый параметр — это процент, вводимый через числовое поле, а окно предпросмотра с шахматным фоном показывает получившуюся форму в реальном времени. Полный CSS clip-path генерируется для копирования. Используйте его, чтобы маскировать изображения, создавать диагональные разделители секций, делать шестиугольные аватары или вырезать формы речевых облачков, не считая координаты вручную.

Как пользоваться Генератор CSS clip-path

1. Выберите форму в выпадающем списке пресетов: круг, эллипс, многоугольник, inset или скруглённый.
2. Для круга или эллипса задайте радиус (или радиусы X/Y) и положение центра X/Y в процентах.
3. Для многоугольника отредактируйте X и Y каждой вершины в процентах; нажмите «Добавить точку», чтобы добавить новые вершины, и измените порядок, редактируя значения.
4. Для inset или скруглённого задайте отступы сверху, справа, снизу и слева; скруглённый также принимает радиус угла.
5. Наблюдайте, как живой предпросмотр обрезает блок по мере ввода.
6. Скопируйте сгенерированный CSS clip-path и вставьте его в свою таблицу стилей.

Примеры

Пресет круг, радиус 50%, центр 50% 50%

clip-path: circle(50% at 50% 50%);

Пресет многоугольник, точки (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Пресет скруглённый, inset 10% со всех сторон, радиус угла 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Часто задаваемые вопросы

Для чего используется clip-path?

Свойство CSS clip-path обрезает элемент по базовой фигуре, так что видимой остаётся только область внутри фигуры. Оно отлично подходит для круглых аватаров, диагональных срезов секций, шестиугольных сеток, масок изображений и речевых облачков — и всё это без дополнительных изображений или SVG-файлов.

Как работает пресет многоугольника?

polygon() рисует фигуру, соединяя по порядку список вершин X/Y. Отредактируйте процентные значения каждой точки и используйте «Добавить точку», чтобы вставить больше вершин; последняя точка автоматически соединяется с первой. Сохраняется минимум три точки, чтобы фигура оставалась корректной.

Почему значения указаны в процентах?

Проценты делают так, что обрезка масштабируется вместе с элементом, поэтому один и тот же clip-path работает при любом размере. 0% — это левый или верхний край, а 100% — правый или нижний край блока элемента.

Что добавляет скруглённый пресет?

Скруглённый пресет использует inset() с радиусом угла round, создавая прямоугольник, обрезанный внутрь с каждой стороны и со скруглёнными углами — удобно для мягких обрамлённых обрезок, которые обычный border-radius не может совместить с обрезкой inset.

Отправляются ли мои данные куда-либо?

Нет. Генератор работает полностью в вашем браузере на JavaScript — значения вашей фигуры никогда не покидают устройство, поэтому он работает приватно и даже офлайн после загрузки страницы.