Właściwość clip-path w CSS pozwala na przycinanie elementu do określonego kształtu. Może być używana do tworzenia zaawansowanych efektów graficznych, takich jak maskowanie części elementów lub tworzenie nieregularnych kształtów.
Przykłady użycia clip-path:
- Przycinanie do kształtu prostokąta:
.element { clip-path: inset(10px 20px 30px 40px); }
- Przycinanie do kształtu koła:
.element { clip-path: circle(50% at 50% 50%); }
- Przycinanie do wielokąta:
.element { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
Zastosowania clip-path:
- Tworzenie maskowania i efektów maski.
- Przycinanie obrazów i elementów do nieregularnych kształtów.
- Tworzenie zaawansowanych efektów graficznych w interfejsie użytkownika.
Przykład:
<img src="example.jpg" class="element" style="clip-path: circle(50% at 50% 50%);">
