Generator CSS Clip-Path
Edytuj kształty CSS clip-path wizualnie za pomocą gotowych ustawień, przeciąganych punktów wielokąta i suwaków. Skopiuj CSS clip-path.
🔒 Działa całkowicie w Twojej przeglądarce — nic nie jest przesyłaneProjektuj kształty CSS clip-path wizualnie
Właściwość clip-path pozwala wyciąć element w niemal dowolny kształt, używając wyłącznie CSS. Sześciokątne awatary, skośne krawędzie sekcji, przyciski w kształcie strzałek i dymki dialogowe można tworzyć bez obrazów i dodatkowego kodu HTML. Ręczne wpisywanie współrzędnych wielokąta jest jednak żmudne. Ten generator zapewnia podgląd na żywo z przeciąganymi uchwytami, dzięki czemu możesz ukształtować element i skopiować gotową deklarację.
Wielokąty, koła, elipsy i wcięcia
Narzędzie obsługuje główne funkcje kształtów podstawowych. polygon() przyjmuje listę punktów zapisanych jako procentowe wartości x i y, co jest idealne dla trójkątów, trapezów, gwiazd i strzałek. circle() i ellipse() przyjmują promień i położenie środka, a inset() przycina element od każdej krawędzi pola z opcjonalnym promieniem zaokrąglenia narożników. Wybierz gotowe ustawienie jako punkt wyjścia i dopracuj je. W przypadku wielokątów przeciągnij dowolny uchwyt, aby przesunąć wierzchołek, lub ustaw na nim fokus i użyj klawiszy strzałek, aby wykonywać precyzyjne kroki o jeden procent, przytrzymując Shift dla większych skoków.
Wskazówki dotyczące używania clip-path
Ponieważ wszystkie wartości są procentowe, kształt skaluje się razem z elementem, dzięki czemu dobrze sprawdza się w układach responsywnych. Pamiętaj, że clip-path wpływa tylko na malowanie: obramowania i cienie pola wychodzące poza kształt również zostaną obcięte, więc jeśli potrzebujesz cienia podążającego za kształtem, użyj elementu opakowującego z filter: drop-shadow(). Możesz także animować przejście między dwoma wielokątami o tej samej liczbie punktów za pomocą przejść CSS, uzyskując płynne efekty morfingu. Wygenerowany kod to jedna linia, którą możesz wkleić do dowolnego arkusza stylów, a cała edycja odbywa się lokalnie w Twojej przeglądarce.
Jak używać
- Wybierz gotowy kształtZacznij od kształtu takiego jak trójkąt, sześciokąt, gwiazda, strzałka, koło lub prostokąt z wcięciem.
- Edytuj kształtPrzeciągaj uchwyty wielokąta lub użyj suwaków dla kształtów koła, elipsy i wcięcia.
- Dodaj lub usuń punktyZaznacz punkt i dodaj kolejny za nim albo go usuń, aby dopracować wielokąt.
- Skopiuj CSSSkopiuj deklarację clip-path i zastosuj ją do dowolnego elementu.