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

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

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

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

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