Generator CSS Clip-Path

CSS clip-path przyjmuje funkcję polygon() złożoną z dowolnej liczby par współrzędnych x/y, co oznacza, że można z prostokąta wykroić kształty daleko wykraczające poza proste prostokąty i okręgi, po które większość osób sięga. Problem w tym, że ręczne wpisywanie tych współrzędnych jest żmudne i przy kształtach bardziej złożonych niż podstawowy trójkąt praktycznie niemożliwe – ten generator zamienia listę współrzędnych w zestaw przeciągalnych punktów na podglądzie, więc kształt, który widzisz, to zawsze dokładnie ten sam kształt, który wygeneruje CSS.

Każdy punkt na podglądzie jest zapisywany jako wartość procentowa szerokości i wysokości prostokąta, co odpowiada dokładnie temu, jak clip-path: polygon() działa od środka: tak zbudowany kształt zachowuje prawidłowe proporcje niezależnie od ostatecznego rozmiaru elementu na prawdziwej stronie – od małej maski ikony po pełnoekranowy baner. Przeciągnij dowolny punkt, aby zmienić kontur, kliknij blisko krawędzi, aby dodać nowy punkt w miejscu kliknięcia, lub kliknij dwukrotnie istniejący punkt, aby go skasować – edytor zawsze zachowuje co najmniej trzy punkty, bo wielokąt z mniejszą liczbą nie może istnieć.

Sześć dołączonych szablonów zostało dobranych tak, by udowodnić, że clip-path potrafi więcej niż tylko kształty wypukłe: gwiazda i strzałka wykorzystują kąty wklęsłe skierowane do wewnątrz, dymek wycina trójkątny ogonek ze zwykłego prostokąta, a bilet z nacięciami robi dwa wgniecenia na przeciwległych krawędziach, dokładnie tak jak wygląda prawdziwy perforowany bilet. Wczytaj dowolny szablon i przeciągaj dalej – nic w edytorze nie zamyka Cię w kształcie wyjściowym.

Prześlij własny obraz, aby zobaczyć podgląd clip-path na prawdziwej zawartości zamiast na jednolitym prostokącie, albo pomiń przesyłanie – podgląd automatycznie przełączy się na wzór w paski, tak by wycięty kształt pozostał 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 offline po załadowaniu strony.