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

Как да използвате генератора на clip-path

1. Изберете Форма: Многоъгълник, Кръг, Елипса или Правоъгълник (inset). Избледнелият слой показва целия елемент, яркият показва какво остава видимо след изрязването.
2. Плъзнете точките в редактора. При многоъгълник всяка точка е връх; щракнете където и да е в областта, за да добавите точка на най-близкия ръб. При кръг или елипса плъзнете центъра и точките на радиуса. При inset плъзнете четирите точки по ръбовете.
3. Донастройте в полетата отдолу: списъка Точки (X и Y в проценти, с Премахни и Добави точка) за многоъгълници или полетата Радиус, Център X, Център Y, Горе, Вдясно, Долу, Вляво и Закръглени ъгли (px) за останалите форми.
4. Започнете по-бързо с Готови форми: триъгълник, трапец, успоредник, ромб, петоъгълник, шестоъгълник, осмоъгълник, скосени ъгли, звезда, кръст, стрелки, шеврон, балонче за реч, кръг, елипса и inset.
5. Отметнете Прилепване към 5 % за подредени стойности и Добави -webkit-clip-path (стар Safari), ако все още поддържате Safari 13.0 или по-стар.
6. По желание пуснете снимка в Фоново изображение (по избор), за да видите формата върху собственото си изображение. Файлът никога не се качва.
7. Копирайте CSS код с бутона Копирай.

Клавиатура: фокусирайте точка, преместете я със стрелките (1 %, или 10 % със Shift) и натиснете Delete, за да премахнете точка от многоъгълник. Многоъгълникът винаги запазва поне три точки.

Функциите за форми на clip-path

clip-path скрива всичко извън дадена форма. Елементът запазва размера си в оформлението; изрязват се само рисуването и областта, върху която може да се щраква.

• polygon(x1 y1, x2 y2, …) свързва точките по ред и затваря формата. polygon(50% 0%, 100% 100%, 0% 100%) е триъгълник с връх нагоре. Координатите започват от горния ляв ъгъл на елемента.
• circle(r at cx cy): circle(50% at 50% 50%) е най-големият кръг, центриран в елемента. Радиусът в проценти е спрямо диагонала на елемента, разделен на √2, така че е равен на част от ширината само при квадратни елементи.
• ellipse(rx ry at cx cy): хоризонталният радиус е част от ширината, вертикалният е част от височината.
• inset(горе дясно долу ляво round радиус) изрязва правоъгълник вътре в краищата, със същото кратко записване с една до четири стойности като при отстъпите и по избор закръглени ъгли.

Този инструмент записва проценти, така че формата се мащабира заедно с елемента, независимо от размера му.

Съвети за добри форми

• Редът на точките на многоъгълника има значение: обикаляйте ръба по посока на часовниковата стрелка (или обратно), за да избегнете пресечени форми във вид на фиба.
• Две форми със същия брой точки могат да се анимират: transition: clip-path 0.4s плавно превръща един шестоъгълник в друг. Браузърът не може да интерполира между многоъгълници с различен брой точки.
• clip-path изрязва и box-shadow, и рамките. За да дадете сянка на изрязана форма, сложете filter: drop-shadow() на родителски елемент.
• Изрязаните области не получават щракания и посочване, което е удобно за бутони с неправилна форма.

Инструментът работи във вашия браузър. Нищо от въведеното не се изпраща към сървър.