30. How does the `clip-path` property work in CSS?

The clip-path property in CSS allows you to clip an element to a specific shape. It can be used to create advanced graphical effects, such as masking parts of elements or creating irregular shapes.

Examples of using clip-path:

1. Clipping to a rectangle shape:

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

2. Clipping to a circle shape:

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

3. Clipping to a polygon shape:

.element {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Applications of clip-path:

• Creating masks and masking effects.
• Clipping images and elements to irregular shapes.
• Creating advanced graphical effects in user interfaces.

Example:

<img src="example.jpg" class="element" style="clip-path: circle(50% at 50% 50%);">