Generator CSS clip-path putanja

CSS clip-path прихвата polygon() функцију састављену од произвољног броја парова x/y координата, што значи да може да исече кутију у облике који далеко превазилазе једноставне правоугаонике и кругове за којима већина посеже. Проблем је у томе што је ручно уписивање тих координата напорно и скоро немогуће исправно извести за било шта изнад основног троугла — овај генератор претвара ту листу координата у скуп тачака које се померају на приказу уживо, тако да облик који видите је увек облик који CSS производи.

Свака тачка на приказу се чува као проценат ширине и висине кутије, што је управо начин на који clip-path: polygon() функционише испод хаубе: облик направљен на овај начин задржава исправне пропорције без обзира на величину коју елемент добије на правој страници, од мале иконе до банера преко целе ширине. Превуците било коју тачку да бисте преобликовали контуру, кликните близу ивице да додате нову тачку тачно тамо где сте кликнули или дуплим кликом на постојећу тачку обришите је — уређивач увек чува најмање три тачке, пошто многоугао не може да постоји са мање.

Шест уграђених предлошка су одабрана да покажу да clip-path може да направи више од конвексних облика: звезда и стрелица се ослањају на унутрашње углове који су окренути ка унутра, облачић за говор изрезује троугласти реп из иначе обичног правоугаоника, а контролни листић прави два усека на супротним ивицама онако како изгледа прави перфорирани листић. Учитајте било који предложак и наставите да превлачите одатле — ништа вас у уређивачу не закључава на почетни облик.

Отпремите сопствену слику да бисте прегледали clip-path на стварном садржају уместо на обичној кутији или прескочите отпремање и приказ се враћа на пругасти узорак тако да исечени облик остане јасно видљив у сваком случају. Као и сви алати на овом сајту, све се извршава локално у прегледачу: ниједна слика никада не напушта ваш уређај, а генератор наставља да ради офлајн након што се страница учита.