clip-path
Przycina element do wybranego kształtu: koła, elipsy, wielokąta i innych.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako kształt z tą samą liczbą punktów
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.clipPath = "circle(50%)"
Przykład
#.hero {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}<section style="padding: 28px 20px 44px; background: linear-gradient(135deg, #7c3aed, #0ea5e9); clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);">
<h2 style="margin: 0">Sekcja ze skośną krawędzią</h2>
</section>Definicja i zastosowanie
#Właściwość clip-path sprawia, że widoczna jest tylko część elementu, wewnątrz podanego kształtu. Reszta jest niewidoczna i nie reaguje na kliknięcia. Kształty tworzysz funkcjami circle(), ellipse(), inset() i polygon().
polygon() przyjmuje listę punktów w procentach, co pozwala tworzyć trójkąty, strzałki, ścięte narożniki i skośne krawędzie sekcji.
Kształty można animować, jeśli mają tę samą liczbę punktów. Daje to efektowne odsłanianie obrazów i przejścia między sekcjami.
Składnia
#clip-path: none | circle(…) | ellipse(…) | inset(…) | polygon(…) | path(…);Wartości
#- Cały element widoczny.
- Koło o promieniu 40% w środku elementu.
- Prostokąt odsunięty od krawędzi, z zaokrągleniem.
polygon(50% 0, 100% 100%, 0 100%)
trójkąt
Trójkąt z wierzchołkiem u góry.polygon(0 0, 100% 0, 100% 80%, 0 100%)
skos
Skośna dolna krawędź, popularna w sekcjach stron.
Wartości w praktyce
#none
.demo { clip-path: none; }circle(40%)
.demo { clip-path: circle(40%); }inset(10% round 16px)
.demo { clip-path: inset(10% round 16px); }polygon(50% 0, 100% 100%, 0 100%)
.demo { clip-path: polygon(50% 0, 100% 100%, 0 100%); }polygon(0 0, 100% 0, 100% 80%, 0 100%)
.demo { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Kształty wielokątów najłatwiej przygotować w generatorach online, a potem wkleić gotowy
polygon(). - Przycięta część nie tylko znika, ale też nie reaguje na mysz. Uważaj, żeby nie uciąć klikalnego obszaru.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.