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

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

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

Шестте пакета с предварителни настройки са избрани, за да докажат, че клипът може да направи повече от изпъкнали форми: и звездата, и стрелката разчитат на рефлексни ъгли, които сочат навътре, балонът на речта издълбава триъгълна опашка от иначе обикновен правоъгълник, а касетата на билета вдлъбва два прореза в противоположните ръбове, както изглежда истински перфориран билет. Заредете всяка предварително зададена настройка и продължете да плъзгате оттам - нищо в редактора не ви заключва в началната форма.

Качете свое собствено изображение, за да прегледате пътя на изрезката спрямо реално съдържание вместо обикновена кутия, или пропуснете изцяло качването и визуализацията се връща към раиран модел, така че изрязаната форма остава ясно видима и в двата случая. Като всеки инструмент на този сайт, всичко работи локално в браузъра: нито едно изображение не напуска вашето устройство и генераторът продължава да работи офлайн, след като страницата се зареди.