◇

Generator CSS clip-path

Przycinaj element do popularnych kształtów i kopiuj kod CSS clip-path.

Twoje pliki zostają na tym urządzeniu

Pliki są przetwarzane w przeglądarce, nigdy nie są wysyłane. Strona pobiera kod i zasoby potrzebne narzędziom. Bez kont i śledzenia.

Użyj przycisku Pobierz, aby zapisać narzędzie jako jeden plik HTML do pracy offline.

Prywatność →

Kształt

wynik

Wypróbuj przykład z rozwiązaniem

Przykład

Wybierz kształt sześciokąta, aby otrzymać clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Każda para to pozycja x i y wewnątrz elementu, więc kształt rozciąga się razem z szerokością i wysokością elementu.

Pamiętaj

Przycinanie ukrywa część elementu, ale zachowuje jego pole układu: sąsiednie elementy się nie przesuwają, a ukryte rogi przestają reagować na kliknięcia. Obramowania i cienie też są przycinane; jeśli potrzebujesz cienia, nałóż filtr drop-shadow na element nadrzędny.

O tym narzędziu

Wybierz kształt i natychmiast przytnij podgląd pola odpowiednią regułą clip-path, a następnie skopiuj gotowy do użycia kod CSS. Podgląd aktualizuje się na żywo, w całości w Twojej przeglądarce.

Najczęściej zadawane pytania

Jak działają wielokątne clip-path?

Każdy punkt to para procentowa x y względem pola; przeglądarka łączy je po kolei i pokazuje tylko obszar wewnątrz konturu.

Czy wszystkie przeglądarki obsługują clip-path?

Kształty polygon, circle, ellipse i inset są obsługiwane w każdej nowoczesnej przeglądarce, więc wygenerowany CSS działa bez prefiksów.