clip-path z polygon() i circle()
Nauczy się Pan/Pani przycinać elementy do niestandardowych kształtów wielokątów lub okręgów za pomocą właściwości clip-path.
clip-path z polygon() i circle() to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest clip-path?
Właściwość clip-path ogranicza widoczny obszar elementu do określonego kształtu. Wszystko poza tym kształtem jest niewidoczne, ale nadal zajmuje miejsce w układzie.
clip-path: circle()
Przytnij element do kształtu koła. Argumentem jest promień:
<div class="avatar"></div>
<div class="badge"></div>
clip-path: ellipse()
Przytnij element do elipsy, określając promień w osi x, promień w osi y oraz opcjonalnie położenie środka:
<div class="card-image"></div>
clip-path: polygon()
Najbardziej rozbudowana funkcja clip-path. Zdefiniuj wielokąt, podając pary współrzędnych x,y:
<div class="hexagon"></div>
<div class="diagonal-cut"></div>
clip-path: inset()
Przytnij element do prostokąta z opcjonalnie zaokrąglonymi rogami. Argumentami są odległości wcięcia:
<div class="card"></div>
clip-path dla kształtów sekcji
Utwórz ukośne przejścia między sekcjami strony:
<div class="section-diagonal">Diagonal Section</div>
Animowanie clip-path
Właściwość clip-path z taką samą liczbą punktów może być animowana za pomocą przejścia, aby tworzyć animacje odsłaniania i przekształcania:
<div class="reveal visible"></div>
clip-path a border-radius
W przypadku prostych zaokrąglonych kształtów lepsza jest właściwość border-radius — działa z tłem i obramowaniem. Użyj clip-path, gdy potrzebujesz nieprostokątnych kształtów, których nie można uzyskać za pomocą border-radius.
clip-path: path()
Funkcja path() przyjmuje ciąg ścieżki SVG, umożliwiając tworzenie dowolnych kształtów:
<div class="star"></div>
Kwestie wydajności
Właściwość clip-path tworzy nowy kontekst stosu i podczas animacji może powodować ponowne malowanie w każdej klatce. Animowanie clip-path jest bardziej kosztowne niż animowanie transform lub opacity — należy łączyć te właściwości z rozwagą.
Referencyjny obszar clip-path
Układ współrzędnych dla clip-path opiera się na obszarze obramowania elementu (lub na obszarze marginesu w przypadku SVG). Wartości procentowe odnoszą się do wymiarów elementu.
Szybkie sprawdzenie
Która funkcja clip-path tworzy nieregularny, nieprostokątny kształt zdefiniowany przez pary współrzędnych?
Podsumowanie
Właściwość clip-path przycina elementy do kształtów geometrycznych. Funkcje circle() i ellipse() tworzą zaokrąglone przycięcia. Funkcja polygon() definiuje dowolny kształt złożony z wielu wierzchołków. Funkcja inset() przycina element do prostokąta z opcjonalnym zaokrągleniem. Aby tworzyć efektowne animacje odsłaniania, animuj przejścia między kształtami polygon o takiej samej liczbie punktów. Użyj funkcji path() do tworzenia dowolnych kształtów na podstawie SVG.
Często zadawane pytania
Czy lekcja „clip-path z polygon() i circle()” jest bezpłatna?
Tak — pełny tekst „clip-path z polygon() i circle()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „clip-path z polygon() i circle()”?
Nauczy się Pan/Pani przycinać elementy do niestandardowych kształtów wielokątów lub okręgów za pomocą właściwości clip-path. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „clip-path z polygon() i circle()”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- clip-path z polygon() i circle()
- shape-outside do zawijania tekstu
- Animowanie kształtów clip-path
- Maski CSS a clip-path