Page 110 - CSS

Clipping and Masking: Overview and Difference

With Clipping and Masking you can make some specified parts of elements transparent or
opaque. Both can be applied to any HTML element.

Clipping

Clips are vector paths. Outside of this path the element will be transparent, inside it's opaque.
Therefore you can define a clip-path property on elements. Every graphical element that also
exists in SVG you can use here as a function to define the path. Examples are circle(), polygon()
or ellipse().

Example

clip-path: circle(100px at center);

The element will be only visible inside of this circle, which is positioned at the center of the
element and has a radius of 100px.

Masking

Masks are similar to Clips, but instead of defining a path you define a mask what layers over the

https://riptutorial.com/ 88