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

Този инструмент генерира стойност за CSS clip-path от готов набор от форми — кръг, елипса, триъгълник, петоъгълник, шестоъгълник, звезда или заоблен правоъгълник — и показва изрязаната форма на живо върху поле за преглед, преди да копирате CSS кода. Няма нужда ръчно да изчислявате координатите на polygon() за често срещани форми.

Какво представлява този инструмент?

clip-path е CSS свойството, което скрива всичко извън определена област на елемент, оставяйки видима само формата вътре — останалата част от кутията на елемента продължава да съществува в оформлението, просто не се рисува. То приема основни функции за форми като circle(), ellipse(), inset() и polygon(), като последната приема произволен списък от двойки координати x/y, за да определи произволна форма с прави ръбове.

Координатите на polygon() са най-трудната част за писане на ръка — петоъгълник, шестоъгълник или звезда изискват по няколко прецизно разположени точки, а грешка в само една от тях изкривява цялата форма. Този инструмент изчислява тези координати вместо вас от готова форма, обновява прегледа на живо мигновено и ви дава точния CSS код за clip-path за копиране.

Източник: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — спецификациите, определящи clip-path и основните му функции за форми.

Защо да го използвате?

Прегледът на живо изрязва реално поле за преглед по избраната форма, така че виждате истинския резултат, вместо да си го представяте от координати.
Седем готови форми — кръг, елипса, триъгълник, петоъгълник, шестоъгълник, звезда и заоблен правоъгълник — покриват по-голямата част от случаите на употреба на clip-path без ръчно писане на точки за polygon.
Готовите форми кръг, елипса и заоблен правоъгълник включват плъзгач за размер/заобляне, за да прецизирате формата без да редактирате координати.
Извежда стандартен CSS код за clip-path, готов за поставяне върху всеки елемент.
Работи изцяло във вашия браузър — нищо от това, което конфигурирате, не се качва никъде. Безплатно, без регистрация, работи на мобилни устройства.

Как да го използвате

Изберете форма от падащото меню — кръг, елипса, триъгълник, петоъгълник, шестоъгълник, звезда или заоблен правоъгълник.
За кръг, елипса и заоблен правоъгълник настройте плъзгача за размер/заобляне, за да прецизирате изрязването.
Наблюдавайте как полето за преглед се обновява на живо при промяна на формата или плъзгача.
Копирайте генерирания CSS код за clip-path и го поставете върху елемента, който искате да изрежете.
За изображение вместо плътен цвят приложете същото свойство clip-path върху елемент <img> или елемент с background-image.

Пример

Вход

Форма: Шестоъгълник

Резултат

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Правилно изрязване с шестоъгълник, често използвано за профилни снимки във вид на значка или икони на функции.

Основни форми срещу polygon()

Кръг, елипса и inset (заоблен правоъгълник) са вградени основни CSS функции за форми със собствен прост синтаксис — радиус или два, плюс незадължителна централна позиция или заобляне на ъглите. Триъгълник, петоъгълник, шестоъгълник и звезда не са вградени форми; всички те се изразяват чрез polygon() — плосък списък от двойки координати x/y, очертаващи контура на формата. Този инструмент изчислява автоматично тези координати за правилни (равномерно разположени) многоъгълници и петолъчна звезда, което е досадната част за прецизно изпълнение на ръка.

Често срещани модели на clip-path

Кръгъл аватар или значка: circle() със среден радиус, често комбиниран с квадратно изходно изображение, за да не се разтегли кръгът в елипса.
Наклонен разделител на секция: персонализиран многоъгълник (не е включен като готова форма тук), който скосява горния или долния ръб на секция на цялата ширина за нетравоъгълно разделяне на страницата.
Форма на звездна оценка или значка: готовата форма звезда, полезна като декоративна форма вместо ръчно рисувано SVG за прости случаи.
Шестоъгълна мрежа от снимки: изображения, изрязани в шестоъгълник, подредени в пчелна пита — често срещан модел за портфолио/страници на екип.
Заобленият правоъгълник като лека алтернатива на border-radius, когато изрязването трябва да отреже и препълващо се дъщерно съдържание, тъй като border-radius сам по себе си не изрязва дъщерни елементи без допълнително overflow:hidden.

Комбиниране с други CSS инструменти

clip-path често се комбинира с CSS градиент като изрязвания фон или с box-shadow, приложена върху обгръщащ елемент (тъй като clip-path изрязва и собствената сянка на елемента, сянка върху родителски елемент е обичайният начин за изрязана форма, която все пак трябва да изглежда сякаш се рее).

→ Border Radius Generator · Box Shadow Generator

Често задавани въпроси

Влияе ли clip-path върху размера на елемента в оформлението?

Не — елементът запазва оригиналния размер и позиция на кутията си за целите на оформлението; clip-path само променя това, което се рисува. Заобикалящите елементи се подреждат така, сякаш изрязването не е приложено, което може да ви изненада, ако очаквате изрязаната форма да се държи като преоразмерен елемент.

Защо box-shadow не се показва върху моята изрязана форма?

clip-path изрязва целия рендиран елемент, включително всяка хвърляна от него сянка, така че box-shadow на елемент, изрязан с кръг или многоъгълник, се отрязва по границата на изрязването. За да получите сянка, която следва видимата форма, приложете box-shadow върху необрязан обгръщащ елемент около изрязания.

Мога ли да анимирам или преходно да сменям форма на clip-path?

Да, но само между две стойности на clip-path от един и същи тип и с еднакъв брой точки — например, polygon() с 6 точки, преминаващ към друг polygon() с 6 точки. Преходът между принципно различни форми (circle() към polygon()) обикновено няма да анимира плавно във всички браузъри.

Може ли clip-path да се използва върху фонови изображения, а не само върху съдържанието на елемента?

clip-path изрязва целия елемент — включително background-image, background-color, рамките и съдържанието заедно — а не конкретно фона. Ако искате да изрежете само фоново изображение, като оставите останалото съдържание неизрязано, приложете clip-path върху отделен елемент, който съдържа само фона.

Поддържа ли се clip-path във всички съвременни браузъри?

Да — clip-path с основни функции за форми (circle, ellipse, inset, polygon) е Baseline widely available в основните браузъри от януари 2020 г., според данните за съвместимост на MDN. Като цяло е безопасно да се използва в продукция без резервен вариант за текущите версии на браузърите.