Jak clip-path wpływa na dostępność?

Wyciąte obszary mogą być "niewidoczne" ale nadal dostępne dla czytnika ekranu (AT). Jeśli wycięty fragment zawiera treść – może być mylące. Dla czysto dekoracyjnych elementów: aria-hidden="true". Kontrast: clip-path nie zmienia kontrastu kolorów.

Generator CSS clip-path

Twórz wartości CSS clip-path wizualnie: polygon, circle, ellipse, inset, path. Podgląd na żywo na elemencie HTML lub obrazie. Kopiuj gotowy CSS. Bezpłatnie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Kształt bazowy

💡 Przeciągaj białe punkty na podglądzie, aby edytować wielokąt na żywo.

Ustawienia kształtu

Tło podglądu

Presety wielokątów

Punkty wielokąta (X Y w osobnych liniach)

Dodaj prefiks -webkit-

Kod wynikowy CSS

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator CSS clip-path – wytnij elementy HTML w dowolny kształt

CSS clip-path pozwala "wyciąć" element HTML w dowolny kształt – trójkąt, sześciokąt, gwiazda, niestandardowy wielokąt. Bez SVG, bez Canvas – czysty CSS. Narzędzie generuje wartość clip-path przez przeciąganie węzłów w podglądzie na żywo.

generator CSS clip-path clip path CSS generator CSS kształty online polygon clip-path maker

Typy wartości clip-path

polygon(x1 y1, x2 y2, ...): dowolny wielokąt. circle(radius at cx cy): koło. ellipse(rx ry at cx cy): elipsa. inset(top right bottom left round radius): prostokąt z zaokrągleniami. path("M..."): ścieżka SVG – najgibsza opcja. none: brak maskowania (resetowanie).

Jednostki i wartości

Procenty (%, relatywne do elementu): polygon(50% 0%, 100% 100%, 0% 100%) – trójkąt zajmujący cały element. Piksele (px, absolutne): dla precyzyjnych kształtów o stałych wymiarach. vw/vh: relatywne do viewportu. Mieszanie: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%).

Animacja clip-path

CSS transition: .element { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.5s ease; } .element:hover { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }. Oba kształty muszą mieć tę samą liczbę punktów! GSAP MorphSVG: animacja między różnymi liczbami punktów.

Zastosowania w UI/UX

Trójkątne dekoracje sekcji (zastępuje SVG separatory). Sześciokątne karty (hexagonal grid). Ukośne nagłówki (skewed hero sections). Maski awatarów (polygon zamiast border-radius). Efekty hover: clip-path z transition = rozwijający się element. reveal animations przy scroll.

Najczęstsze pytania

Jakie przeglądarki obsługują CSS clip-path?

clip-path na elementach HTML: Chrome 55+, Firefox 54+, Safari 9.1+ (prefiks -webkit- dla starszych). path() wartość: Chrome 88+, Firefox 71+, Safari 13.1+. IE11: nie obsługuje clip-path (tylko SVG clip-path z prefiksem). Caniuse: clip-path = ~97% wsparcie globalne (2024).

Czy clip-path wpływa na layout (zajmowane miejsce)?

Clip-path ukrywa wizualnie ale element nadal zajmuje miejsce w layoutcie (inaczej niż display:none). Interakcja (click): zależy od przeglądarki – niektóre ignorują kliknięcia w "wyciętym" obszarze. overflow: hidden + clip-path: różne zachowanie.

Jak zrobić ukośny nagłówek (diagonal section)?

Metoda clip-path: .section { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }. Metoda transform: transform: skewY(-3deg) na sekcji + contra-skew wewnątrz. Metoda SVG: separator wave SVG pod sekcją. Clip-path: najczystsze CSS-only rozwiązanie.

Czy clip-path działa na filmach (video)?

Tak – clip-path działa na dowolnym elemencie HTML, w tym