Generator CSS Clip-path
Generator CSS clip-path tworzy wartości clip-path dla popularnych kształtów — trójkąta, strzałki, pięciokąta, sześciokąta, gwiazdy, szewronu, koła, elipsy i zaokrąglonego inset — z podglądem na żywo.
O tym narzędziu
Generator CSS clip-path tworzy wartości clip-path dla popularnych kształtów — trójkąta, strzałki, pięciokąta, sześciokąta, gwiazdy, szewronu, koła, elipsy i zaokrąglonego inset — z podglądem na żywo.
Jak używać
- Wybierz kształt z listy.
- Wybierz kolor wypełnienia podglądu.
- Kliknij Copy CSS i zastosuj clip-path do dowolnego elementu lub obrazu.
Warto wiedzieć
- clip-path ukrywa wszystko poza kształtem, więc nie potrzebujesz maski graficznej ani pliku SVG.
- polygon() przyjmuje listę punktów x y w procentach, która skaluje się razem z elementem.
- circle(50% at 50% 50%) przycina element do wyśrodkowanego koła.
- inset() z round dodaje zaokrąglone narożniki do prostokątnego przycięcia.
- Podstawowe kształty clip-path są obsługiwane we wszystkich aktualnych popularnych przeglądarkach.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak przyciąć obraz do kształtu w CSS?
Zastosuj clip-path do obrazu, np. clip-path: polygon(50% 0%, 0% 100%, 100% 100%); dla trójkąta.
Czym różni się clip-path od mask?
clip-path wycina wektorowy kształt o ostrych krawędziach. mask używa obrazu lub gradientu i może tworzyć miękkie, częściowo przezroczyste krawędzie.
Czy clip-path można animować?
Tak — jeśli oba kształty korzystają z tej samej funkcji i mają tyle samo punktów, przeglądarka może płynnie przejść między nimi.
Czy clip-path wpływa na kliknięcia?
Tak. Obszary poza przyciętym kształtem nie są renderowane i nie odbierają zdarzeń wskaźnika.