30. Jak działa właściwość `clip-path` w CSS?

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:

1. Przycinanie do kształtu prostokąta:

.element {
  clip-path: inset(10px 20px 30px 40px);
}

2. Przycinanie do kształtu koła:

.element {
  clip-path: circle(50% at 50% 50%);
}

3. 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%);">