Generator CSS clip-path

Pięć funkcji kształtu

Typowe przycięcia wielokątne

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Ukośne cięcie sekcji hero to prawdopodobnie najczęściej używany efekt ze wszystkich – nadaje sekcji nowoczesny, pochylony wygląd bez żadnego SVG.

Animowanie clip-path

clip-path animuje się, dopóki oba stany mają tę samą funkcję kształtu z tą samą liczbą punktów. Wielokąt o 4 wierzchołkach płynnie animuje się do innego wielokąta o 4 wierzchołkach; dodanie lub usunięcie wierzchołków przerywa interpolację.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Wykorzystaj to do efektów odsłaniania, subtelnych zniekształceń przy najechaniu kursorem lub przejść między stronami.

clip-path a overflow: hidden

overflow: hidden przycina do prostokąta border-box (który można zaokrąglić za pomocą border-radius). clip-path przycina do dowolnego zdefiniowanego przez Ciebie kształtu i przycina wszystko – w tym cienie i obrysy. Jeśli chcesz, aby cienie pozostały widoczne poza kształtem, clip-path nie jest tym, czego szukasz.

filter: drop-shadow() pozwala z powrotem dodać cień podążający za kształtem do elementów z clip-path, ale działa wolniej.

Wydajność

W nowoczesnych przeglądarkach clip-path jest akcelerowany przez GPU, więc animowane clip-path są płynne. Wyjątkiem są path() i bardzo złożone wielokąty (ponad 40 wierzchołków), które w niektórych przeglądarkach przechodzą na renderowanie przez CPU.

Dostępność

clip-path zmienia tylko to, co widoczne. Czytniki ekranu, fokus klawiatury i zdarzenia wskaźnika podążają za pełnym polem elementu, a nie za przyciętym kształtem. Jeśli obraz jest przycięty do kształtu gwiazdy, tekst alternatywny jest odczytywany normalnie. Jeśli przycisk jest przycięty do kształtu szewronu, celem kliknięcia jest cały prostokąt, a nie widoczny szewron – co może powodować przypadkowe kliknięcia w pozornie pustej przestrzeni.

W przypadku przycisków o nietypowych przyciętych kształtach ustaw szerokość i wysokość elementu ciasno, aby obszar kliknięcia możliwie dobrze pokrywał się z widocznym obszarem.