Generator CSS clip-path

Czym jest Generator CSS clip-path?

Generator CSS clip-path to darmowy edytor wizualny właściwości CSS clip-path, stworzony dla deweloperów front-end i projektantów, którzy chcą przycinać elementy do kształtów innych niż prostokątne. Wybierz gotowe ustawienie z listy rozwijanej — circle() i ellipse() z promieniem i punktem środkowym, polygon() z dowolną liczbą wierzchołków, inset() z czterema przesunięciami krawędzi lub zaokrąglony wariant inset() z promieniem narożnika. Każdy parametr to wartość procentowa wprowadzana w polu liczbowym, a pole podglądu z tłem w szachownicę pokazuje powstały kształt w czasie rzeczywistym. Pełny CSS clip-path jest generowany do skopiowania. Użyj go do maskowania obrazów, tworzenia ukośnych przekładek sekcji, budowania heksagonalnych awatarów lub wycinania kształtów dymków bez ręcznego liczenia współrzędnych.

Jak używać Generator CSS clip-path

1. Wybierz kształt z listy rozwijanej ustawień: koło, elipsa, wielokąt, inset lub zaokrąglony.
2. Dla koła lub elipsy ustaw promień (lub promienie X/Y) oraz pozycję środka X/Y w procentach.
3. Dla wielokąta edytuj wartości X i Y każdego wierzchołka w procentach; kliknij Dodaj punkt, aby dodać więcej wierzchołków, i zmień ich kolejność, edytując wartości.
4. Dla inset lub zaokrąglonego ustaw przesunięcia górne, prawe, dolne i lewe; zaokrąglony przyjmuje też promień narożnika.
5. Obserwuj, jak podgląd na żywo przycina pole w trakcie pisania.
6. Skopiuj wygenerowany CSS clip-path i wklej go do swojego arkusza stylów.

Przykłady

Ustawienie koło, promień 50%, środek 50% 50%

clip-path: circle(50% at 50% 50%);

Ustawienie wielokąt, punkty (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Ustawienie zaokrąglony, inset 10% ze wszystkich stron, promień narożnika 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Najczęściej zadawane pytania

Do czego służy clip-path?

Właściwość CSS clip-path przycina element do podstawowego kształtu, tak że widoczny pozostaje tylko obszar wewnątrz kształtu. Świetnie sprawdza się przy okrągłych awatarach, ukośnych cięciach sekcji, heksagonalnych siatkach, maskach obrazów i dymkach — wszystko bez dodatkowych obrazów ani plików SVG.

Jak działa ustawienie wielokąta?

polygon() rysuje kształt, łącząc po kolei listę wierzchołków X/Y. Edytuj wartości procentowe każdego punktu i użyj Dodaj punkt, aby wstawić więcej wierzchołków; ostatni punkt automatycznie łączy się z powrotem z pierwszym. Utrzymywane są co najmniej trzy punkty, aby kształt pozostał prawidłowy.

Dlaczego wartości są w procentach?

Procenty sprawiają, że przycięcie skaluje się wraz z elementem, więc ten sam clip-path działa w dowolnym rozmiarze. 0% to lewa lub górna krawędź, a 100% to prawa lub dolna krawędź pola elementu.

Co dodaje ustawienie zaokrąglone?

Ustawienie zaokrąglone używa inset() z promieniem narożnika round, tworząc prostokąt przycięty do wewnątrz z każdej strony i z zaokrąglonymi rogami — przydatne przy miękkich, obramowanych przycięciach, których zwykłe border-radius nie potrafi połączyć z przycięciem inset.

Czy moje dane są gdziekolwiek wysyłane?

Nie. Generator działa w całości w Twojej przeglądarce w JavaScript — wartości kształtu nigdy nie opuszczają Twojego urządzenia, więc działa prywatnie, a nawet offline po załadowaniu strony.