Generator ścieżek przycinania CSS Clip-Path

Wizualnie generuje kod ścieżki przycinania CSS clip-path, obsługuje wielokąty, koła, elipsy i inne kształty oraz umożliwia wsadowe przetwarzanie obrazów

Zgłoszenie błędu

Tryb wykonywania w przeglądarce: Twoje dane są przetwarzane w przeglądarce i nie są przesyłane na serwer.

Szybkość i stabilność: Szybkość przetwarzania zależy od urządzenia i przeglądarki. Przy dużych zadaniach wsadowych wersja desktopowa może być stabilniejsza.

Ładowanie narzędzia, czekaj...

Jeśli narzędzie online nie ładuje się lub nie działa, wypróbuj narzędzie desktopowe. https://tools.yikeaigc.com/

Użycie narzędzia

Wróć do starej wersji

Najpierw ustaw ścieżkę przycięcia, potem skopiuj kod lub przetwórz obrazy zbiorczo

Po wybraniu kształtu możesz przeciągać punkty wielokąta albo przełączyć na koło, elipsę lub prostokąt inset i dostosować parametry. Przetwarzanie zbiorcze użyje bieżącej ścieżki. Przy wielu obrazach pokażemy tylko 20 pierwszych, ale przetworzymy wszystkie.

Informacje o bieżącej ścieżce

Typpolygon

Punkty kontrolne3

Wskazówka: najpierw ustaw ścieżkę, potem skopiuj kod lub przetwórz obrazy.

Podgląd na żywo W trybie wielokąta możesz przeciągać niebieskie punkty; współrzędne automatycznie utworzą CSS.

Współrzędne: względem elementu, lewy górny róg to 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Kształt i presety Wybierz typ, potem dostosuj parametry

Typ kształtu

Kategorie presetów

Parametry ścieżki Wartości obsługują procenty

Tekst współrzędnych

Promień

Środek X

Środek Y

Promień poziomy

Promień pionowy

Środek X

Środek Y

Góra

Prawo

Dół

Lewo

Zaokrąglenie rogów

Podgląd i wynik Tło wpływa tylko na podgląd i eksport obrazu

Szerokość podglądu (px)

Wysokość podglądu (px)

Kolor A

Kolor B

Kąt gradientu

Podgląd obrazu

Pokaż granice elementu Dołącz prefiks -webkit Generuj selektor klasy

Generuj kod

Kod aktualizuje się na bieżąco.

Zastosuj bieżącą ścieżkę wsadowo Najpierw ustaw ścieżkę w poprzednim kroku, a potem wybierz obróbkę obrazów.

Kliknij lub przeciągnij obrazy Obsługuje JPG, PNG, WebP, GIF, BMP i inne popularne formaty

Nie wybrano obrazów.

Ustawienia wyjścia PNG obsługuje przezroczyste tło

Format wyjściowy

Tryb rozmiaru

Ogranicz dłuższy bok (px)

Własna szerokość (px)

Własna wysokość (px)

Jakość wyjściowa92%

Przezroczysty obszar poza kadrem Użyj bieżącej ścieżki

Oczekiwanie na przetwarzanie.

Podgląd obrazu i wynik Po przesłaniu pokażemy pierwsze 20; przetwarzanie obejmie wszystkie pliki.

Obrazy do przetworzenia0 zdjęć

Wybierz obrazy, aby zobaczyć miniatury.

Wyniki przetwarzania0 zdjęć

Po zakończeniu przetwarzania pojawią się miniatury wyników.

Instrukcje

Instrukcja obsługi oprogramowania

Projektowanie ścieżki przycinania: Po wejściu do narzędzia najpierw w kroku „Projektuj ścieżkę” wybierz typ kształtu: wielokąt, koło, elipsę lub prostokąt wewnętrzny.
Wybór gotowego kształtu: Możesz wybrać gotowy kształt z kategorii podstawowych figur, strzałek i oznaczeń lub elementów dekoracyjnych, a następnie dostosować parametry według potrzeb.
Edycja parametrów ścieżki: W przypadku wielokąta możesz przeciągać punkty kontrolne albo wpisać współrzędne procentowe w polu tekstowym; dla koła, elipsy i prostokąta wewnętrznego możesz bezpośrednio podać promień, punkt środkowy, marginesy i zaokrąglenie rogów.
Ustawienie efektu podglądu: Możesz dostosować szerokość i wysokość podglądu, kolory gradientu oraz kąt gradientu, a także wybrać obraz jako zawartość podglądu.
Kopiowanie kodu CSS: Po zatwierdzeniu efektu kliknij „Kopiuj clip-path” lub „Kopiuj CSS”; możesz wybrać, czy uwzględnić prefiks -webkit i selektor klasy.
Przetwarzanie obrazów wsadowo: Kliknij „Dalej: przetwarzanie wsadowe”, wybierz wiele obrazów, ustaw format wyjściowy, jakość i tryb rozmiaru, a następnie rozpocznij przetwarzanie.
Pobieranie wyników: Po zakończeniu przetwarzania kliknij „Pobierz wszystkie wyniki ZIP”; pliki wyjściowe będą w miarę możliwości zachowywać oryginalne nazwy, a w przypadku powtórzeń zostaną automatycznie dodane liczby rozróżniające.

Najczęstsze pytania

Odpowiedź: clip-path służy do przycinania elementu do określonego kształtu. Często używa się go do niestandardowego wyświetlania obrazów, projektowania krawędzi kart, kształtów przycisków, dekoracyjnych grafik na stronach i efektów interaktywnych.

Odpowiedź: polygon tworzy wielokąt na podstawie wielu punktów współrzędnych; circle tworzy okrągły obszar przycinania; ellipse tworzy eliptyczny obszar przycinania; inset tworzy prostokąt wewnętrzny i obsługuje parametry zaokrąglenia rogów.

Odpowiedź: Współrzędne podaje się w procentach, na przykład 50% 0% oznacza środek górnej krawędzi elementu, a 100% 100% oznacza prawy dolny róg. Punkty oddziela się przecinkami, a wymagane są co najmniej 3 punkty.

Odpowiedź: -webkit-clip-path służy do zgodności z niektórymi środowiskami opartymi na silniku WebKit. Aby zwiększyć zakres obsługiwanych środowisk, można jednocześnie zachować zapis z prefiksem i zapis standardowy.

O: Jako dane wejściowe można wybrać popularne formaty obrazów, a dane wyjściowe obsługują PNG, JPEG i WebP. PNG nadaje się do zachowania obszarów przezroczystych, JPEG do tworzenia mniejszych plików, a WebP do zachowania równowagi między rozmiarem a jakością obrazu.

O: Narzędzie postara się zachować oryginalną nazwę pliku i zastąpi rozszerzenie zgodnie z formatem wyjściowym. Jeśli istnieją pliki o tej samej nazwie, do nazwy pliku zostanie dodana liczba, aby wyniki się nie nadpisywały.