Cross-Browser Masks
Cross-Browser Masks
Masks is the method of displaying part of an element, using a selected image as a mask.
Browser Support
Sadly this feature is currently not supported by any browser.
Code Example
You can use Masks like this:
.clip-examples {
clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)
clip-path: inset-rectangle(from top, from right, from bottom, from left, rounded-x, rounded-y)
/* Looks like this is what rect() used to be like with clip */
/* Will replace inset(), I suppose */
clip-path: polygon(a, bunch, of, points)
clip-path: circle(radius at x, y)
clip-path: ellipse(radius-x, radius-y at x, y)
}
More Information
More information can be found here.