Generator clip-path

Jak to działa

clip-path przycina element do konturu. Wszystko poza kształtem nie jest rysowane i nie jest klikalne, co czyni go prawdziwym kształtem, a nie obrazkiem kształtu — i działa na dowolnym elemencie, także na obrazach i wideo.

Procenty, nie piksele

Punkty wielokąta są podawane jako procenty własnej szerokości i wysokości elementu, więc kształt rozciąga się razem z elementem, zamiast się psuć przy innym rozmiarze. Dzięki temu nadaje się do układu responsywnego.

Kliknięcia podążają za kształtem

To część, która odróżnia clip-path od dekoracyjnej nakładki. Odcięty obszar w ogóle nie otrzymuje zdarzeń wskaźnika, więc trójkątny przycisk jest trójkątny zarówno dla myszy, jak i dla oka.

Animowanie między kształtami

Wielokąt może płynnie przejść w inny wielokąt tylko wtedy, gdy oba mają tę samą liczbę punktów. Zwykła sztuczka to uzupełnienie prostszego kształtu zduplikowanymi punktami, by liczby się zgadzały — trójkąt zapisany jako cztery punkty, z których dwa leżą w tym samym miejscu, może przejść w kwadrat.

Wiersz z -webkit-

Aktualne przeglądarki potrzebują tylko właściwości bez prefiksu. Kopia z prefiksem jest dołączona, bo niektóre starsze wersje Safari nadal jej wymagają, a pozostawienie jej nic nie kosztuje.

Czego nie robi

Przycina; nie przepływa na nowo. Otaczający tekst nadal traktuje element jako jego pierwotny prostokąt. Aby tekst opływał kształt, potrzebujesz shape-outside, które przyjmuje tę samą składnię.