Generator ścieżki klipu CSS

Clip-path CSS akceptuje funkcję Polygon() złożoną z dowolnej liczby par współrzędnych x/y, co oznacza, że może wyrzeźbić pudełko w kształty znacznie wykraczające poza proste prostokąty i okręgi, po które sięga większość ludzi. Problem w tym, że ręczne wpisywanie tych współrzędnych jest żmudne i prawie niemożliwe do uzyskania w przypadku czegokolwiek poza podstawowym trójkątem — ten generator zamienia tę listę współrzędnych w zestaw przeciąganych punktów na podglądzie na żywo, więc kształt, który widzisz, jest zawsze kształtem generowanym przez CSS.

Każdy punkt podglądu jest zapisywany jako procent szerokości i wysokości ramki. Dokładnie tak działa funkcja Clip-path: Polygon() pod maską: zbudowany w ten sposób kształt zachowuje swoje proporcje niezależnie od rozmiaru elementu na prawdziwej stronie, od małej maski ikony po baner bohatera o pełnej szerokości. Przeciągnij dowolny punkt, aby zmienić kształt konturu, kliknij blisko krawędzi, aby dodać nowy punkt dokładnie w miejscu kliknięcia, lub kliknij dwukrotnie istniejący punkt, aby go usunąć — edytor zawsze zachowuje co najmniej trzy punkty, ponieważ wielokąt nie może istnieć z mniejszą liczbą.

Wybrano sześć dołączonych ustawień wstępnych, aby udowodnić, że ścieżka klipu może zrobić więcej niż tylko wypukłe kształty: gwiazda i strzałka opierają się na kątach odruchowych skierowanych do wewnątrz, dymek wycina trójkątny ogon z gładkiego prostokąta, a odcinek biletu wcina dwa nacięcia w przeciwległe krawędzie, tak jak wygląda prawdziwy perforowany bilet. Załaduj dowolne ustawienie wstępne i przeciągnij stamtąd — nic w edytorze nie blokuje Cię w kształcie początkowym.

Prześlij własny obraz, aby wyświetlić podgląd ścieżki klipu na tle rzeczywistej zawartości zamiast zwykłego pudełka, lub całkowicie pomiń przesyłanie, a podgląd powróci do wzoru w paski, dzięki czemu wycięty kształt będzie wyraźnie widoczny w obu przypadkach. Jak każde narzędzie na tej stronie, całość działa lokalnie w przeglądarce: żaden obraz nie opuszcza Twojego urządzenia, a generator działa w trybie offline po załadowaniu strony.