Generator clip-path CSS

To narzędzie generuje wartość CSS clip-path na podstawie gotowego kształtu — koła, elipsy, trójkąta, pięciokąta, sześciokąta, gwiazdy lub prostokąta o zaokrąglonych rogach — i pokazuje przycięty kształt na żywo w polu podglądu, zanim skopiujesz kod CSS. Nie musisz ręcznie wyliczać współrzędnych polygon() dla popularnych kształtów.

Czym jest to narzędzie?

clip-path to właściwość CSS, która ukrywa wszystko poza zdefiniowanym obszarem elementu, pozostawiając widocznym tylko kształt wewnątrz — reszta pola elementu nadal istnieje w układzie strony, po prostu nie jest wyświetlana. Przyjmuje funkcje podstawowych kształtów, takie jak circle(), ellipse(), inset() oraz polygon(), gdzie ta ostatnia przyjmuje dowolną listę par współrzędnych x/y, definiując dowolny kształt o prostych krawędziach.

Współrzędne polygon() są najtrudniejsze do napisania ręcznie — pięciokąt, sześciokąt czy gwiazda wymagają kilku precyzyjnie umieszczonych punktów, a błąd w jednym z nich zniekształca cały kształt. To narzędzie oblicza te współrzędne za Ciebie na podstawie gotowego kształtu, natychmiast aktualizuje podgląd na żywo i podaje dokładny kod CSS clip-path do skopiowania.

Źródło: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — specyfikacje definiujące clip-path i jego funkcje podstawowych kształtów.

Dlaczego warto go używać?

Podgląd na żywo przycina rzeczywiste pole podglądu do wybranego kształtu, więc widzisz prawdziwy wynik zamiast wyobrażać go sobie na podstawie współrzędnych.
Siedem gotowych kształtów — koło, elipsa, trójkąt, pięciokąt, sześciokąt, gwiazda i prostokąt o zaokrąglonych rogach — pokrywa zdecydowaną większość zastosowań clip-path bez ręcznego pisania punktów polygon.
Kształty koła, elipsy i prostokąta o zaokrąglonych rogach zawierają suwak rozmiaru/zaokrąglenia, dzięki czemu możesz dopracować kształt bez edytowania współrzędnych.
Generuje standardowy kod CSS clip-path gotowy do wklejenia na dowolny element.
Działa całkowicie w Twojej przeglądarce — żadne z Twoich ustawień nie są nigdzie przesyłane. Bezpłatne, bez rejestracji, działa na urządzeniach mobilnych.

Jak używać

Wybierz kształt z listy rozwijanej — koło, elipsę, trójkąt, pięciokąt, sześciokąt, gwiazdę lub prostokąt o zaokrąglonych rogach.
Dla kształtów koła, elipsy i prostokąta o zaokrąglonych rogach dostosuj suwak rozmiaru/zaokrąglenia, aby dopracować przycięcie.
Obserwuj, jak pole podglądu aktualizuje się na żywo podczas zmiany kształtu lub suwaka.
Skopiuj wygenerowany kod CSS clip-path i wklej go do elementu, który chcesz przyciąć.
Zamiast jednolitego koloru możesz zastosować tę samą właściwość clip-path do <img> lub elementu z background-image.

Przykład

Wejście

Shape: Hexagon

Wynik

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Przycięcie w postaci foremnego sześciokąta, powszechnie stosowane do zdjęć profilowych w stylu odznaki lub ikon funkcji.

Kształty podstawowe a polygon()

Koło, elipsa i inset (prostokąt o zaokrąglonych rogach) to wbudowane funkcje podstawowych kształtów CSS z własną prostą składnią — promień lub dwa, plus opcjonalna pozycja środka albo zaokrąglenie rogów. Trójkąt, pięciokąt, sześciokąt i gwiazda nie są kształtami wbudowanymi; wszystkie są wyrażane za pomocą polygon() — płaskiej listy par współrzędnych x/y wyznaczających obrys kształtu. To narzędzie automatycznie oblicza te współrzędne dla foremnych (równomiernie rozmieszczonych) wielokątów i pięcioramiennej gwiazdy, co jest najbardziej żmudną częścią do poprawnego wykonania ręcznie.

Typowe wzory clip-path

Okrągły awatar lub odznaka: circle() o średnim promieniu, często w połączeniu z kwadratowym obrazem źródłowym, aby koło nie zostało rozciągnięte w elipsę.
Ukośny podział sekcji: niestandardowy wielokąt (nieuwzględniony tutaj jako gotowy kształt), który skosnie górną lub dolną krawędź sekcji na pełną szerokość dla nieprostokątnego podziału strony.
Kształt ikony oceny gwiazdkowej lub odznaki: gotowy kształt gwiazdy, przydatny jako dekoracyjny kształt zamiast ręcznie rysowanego SVG w prostych przypadkach.
Siatka zdjęć w kształcie sześciokątów: obrazy przycięte w sześciokąty ułożone w plaster miodu — popularny wzorzec dla portfolio lub strony zespołu.
Prostokąt o zaokrąglonych rogach jako lekka alternatywa dla border-radius, gdy przycięcie ma też odcinać wystający element potomny, ponieważ samo border-radius nie przycina elementów potomnych bez dodatkowego overflow:hidden.

Łączenie z innymi narzędziami CSS

clip-path jest często łączony z gradientem CSS jako przycinanym tłem lub z box-shadow zastosowanym do elementu opakowującego (ponieważ clip-path przycina też cień samego elementu, cień na elemencie nadrzędnym jest zwykłym obejściem dla przyciętego kształtu, który mimo to ma sprawiać wrażenie unoszącego się).

→ Generator gradientów CSS · Generator promienia krawędzi · Generator cieni ramki

Najczęściej zadawane pytania

Czy clip-path wpływa na rozmiar elementu w układzie strony?

Nie — element zachowuje swój oryginalny rozmiar i pozycję pola dla celów układu strony; clip-path zmienia tylko to, co jest wyświetlane. Otaczające elementy są rozmieszczane tak, jakby przycięcie nie zostało zastosowane, co może zaskoczyć, jeśli oczekujesz, że przycięty kształt zachowuje się jak element o zmienionym rozmiarze.

Dlaczego box-shadow nie pojawia się na moim przyciętym kształcie?

clip-path przycina całe renderowanie elementu, w tym rzucany przez niego cień, więc własny box-shadow elementu przyciętego kołem lub wielokątem jest obcinany na granicy przycięcia. Aby uzyskać cień podążający za widocznym kształtem, zastosuj box-shadow do nieprzyciętego elementu opakowującego wokół przyciętego elementu.

Czy mogę animować lub przejściowo zmieniać kształt clip-path?

Tak, ale tylko między dwiema wartościami clip-path tego samego typu i o tej samej liczbie punktów — na przykład jeden polygon() z 6 punktami przechodzący w inny polygon() z 6 punktami. Przejście między zasadniczo różnymi kształtami (circle() do polygon()) na ogół nie animuje się płynnie we wszystkich przeglądarkach.

Czy clip-path można stosować do obrazów tła, a nie tylko do zawartości elementu?

clip-path przycina cały element — łącznie z jego background-image, background-color, obramowaniami i zawartością — a nie konkretnie tło. Jeśli chcesz przyciąć tylko obraz tła, pozostawiając resztę zawartości nieprzyciętą, zastosuj clip-path do osobnego elementu, który zawiera wyłącznie tło.

Czy clip-path jest obsługiwany we wszystkich nowoczesnych przeglądarkach?

Tak — clip-path z funkcjami podstawowych kształtów (circle, ellipse, inset, polygon) jest szeroko dostępny (Baseline) we wszystkich głównych przeglądarkach od stycznia 2020 roku, zgodnie z danymi kompatybilności MDN. Ogólnie można go bezpiecznie stosować produkcyjnie bez rozwiązania zastępczego dla obecnych wersji przeglądarek.