Generator clip-path

Jak korzystać z generatora clip-path

1. Wybierz Kształt: Wielokąt, Koło, Elipsa lub Inset. Wyblakła warstwa pokazuje cały element, a jasna – to, co pozostaje widoczne po przycięciu.
2. Przeciągaj kropki w edytorze. W wielokącie każda kropka to wierzchołek; kliknij w dowolnym miejscu obszaru, aby dodać punkt na najbliższej krawędzi. W kole lub elipsie przeciągaj kropki środka i promienia. W trybie inset przeciągaj cztery kropki krawędzi.
3. Dopracuj kształt w polach poniżej: lista Punkty (X i Y w procentach, z przyciskami Usuń i Dodaj punkt) dla wielokątów albo pola Promień, Środek X, Środek Y, Góra, Prawo, Dół, Lewo i Zaokrąglone rogi (px) dla pozostałych kształtów.
4. Zacznij szybciej od sekcji Gotowe kształty: trójkąt, trapez, równoległobok, romb, pięciokąt, sześciokąt, ośmiokąt, ścięte rogi, gwiazda, krzyż, strzałki, szewron, dymek, koło, elipsa i inset.
5. Zaznacz Przyciągaj co 5%, aby uzyskać równe wartości, oraz Dodaj -webkit-clip-path (stare Safari), jeśli nadal wspierasz Safari 13.0 lub starsze.
6. Opcjonalnie upuść zdjęcie w polu Obraz tła (opcjonalnie), aby zobaczyć kształt na własnym obrazie. Plik nigdy nie jest przesyłany.
7. Skopiuj Kod CSS przyciskiem Kopiuj.

Klawiatura: ustaw fokus na kropce, przesuwaj ją strzałkami (o 1%, z Shift o 10%) i naciśnij Delete, aby usunąć punkt wielokąta. Wielokąt zawsze zachowuje co najmniej trzy punkty.

Funkcje kształtów clip-path

clip-path ukrywa wszystko, co znajduje się poza kształtem. Element zachowuje swój rozmiar w układzie strony; przycinane jest tylko to, co jest rysowane, oraz obszar klikalny.

• polygon(x1 y1, x2 y2, …) łączy punkty po kolei i zamyka kształt. polygon(50% 0%, 100% 100%, 0% 100%) to trójkąt skierowany w górę. Współrzędne liczone są od lewego górnego rogu elementu.
• circle(r at cx cy): circle(50% at 50% 50%) to największe koło wyśrodkowane w elemencie. Promień procentowy odnosi się do przekątnej elementu podzielonej przez √2, więc tylko w kwadratowych elementach odpowiada części szerokości.
• ellipse(rx ry at cx cy): promień poziomy to część szerokości, a pionowy – część wysokości.
• inset(top right bottom left round radius) wycina prostokąt wewnątrz krawędzi, z tą samą skróconą składnią od jednej do czterech wartości co marginesy i opcjonalnymi zaokrąglonymi rogami.

To narzędzie zapisuje wartości procentowe, więc kształt skaluje się razem z elementem niezależnie od jego rozmiaru.

Wskazówki dla dobrych kształtów

• Kolejność punktów wielokąta ma znaczenie: obchodzenie krawędzi zgodnie z ruchem wskazówek zegara (lub przeciwnie) pozwala uniknąć skrzyżowanych kształtów w formie „muszki”.
• Dwa kształty o tej samej liczbie punktów można animować: transition: clip-path 0.4s płynnie zmienia jeden sześciokąt w inny. Przeglądarka nie potrafi interpolować między wielokątami o różnej liczbie punktów.
• clip-path przycina również box-shadow i obramowania. Aby dodać cień do przyciętego kształtu, ustaw filter: drop-shadow() na elemencie nadrzędnym.
• Przycięte obszary nie reagują na kliknięcia ani najechanie kursorem, co przydaje się przy przyciskach o nieregularnym kształcie.