Генератор CSS Clip Path

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

How to use Clip Path Generator

1. Нажмите заданную форму, чтобы загрузить ее точки, или выберите вставку, окружность или эллипс для закругленных клипов.
2. Перетащите точки на предварительном просмотре, чтобы изменить многоугольник или настроить ползунки для круговых и вставных режимов.
3. Переключите «Show clipped-away area», чтобы просмотреть полный элемент, а затем нажмите Copy CSS, чтобы захватить правило пути клипа.

Что такое имя?

FAQ

Что такое свойство CSS clip-path?

клип-путь определяет область элемента, которая видна; все, что находится за пределами области, отрезано. Он поддерживает основные формы, такие как полигон (), круг (), эллипс () и вставка (), позволяя вам обрезать элементы в непрямоугольные формы без изображений.

Могу ли я редактировать точки полигона вручную?

Да. После выбора любого предустановленного полигона вершины появляются в виде перетаскиваемых ручек в предварительном просмотре. Перетащите их для изменения полигона и обновления процентных координат в генерируемом CSS.

Поддерживается ли клип-путь во всех браузерах?

Современные версии Chrome, Edge, Firefox и Safari поддерживают клип-путь с основными формами. Для старых браузеров вам может понадобиться префикс -webkit или запасной вариант, так как неподдерживаемые браузеры просто проигнорируют правило и покажут полный элемент.

Related tools

• Cubic Bezier Generator
• CSS Gradient Generator
• Box Shadow Generator
• Color Palette Generator