Page 108 - CSS

Clip-path:

As at the time writing (Jul '16) Chrome, Safari and Opera supports clip-path when the path is
created using basic shapes (like circle, polygon) or the url(#clipper) syntax with inline SVG. They
don't support clipping based on shapes that are part of external SVG files. Also, they require the -
webkit prefix to be present.

Firefox supports only the url() syntax for clip-path whereas Internet Explorer (and Edge) offer no
support.

Examples

Clipping (Polygon)

CSS:

div{
width:200px;
height:200px;
background:teal;
clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}

HTML:

<div></div>

In the above example, a polygonal clipping path is used to clip the square (200 x 200) element
into a triangle shape. The output shape is a triangle because the path starts at (that is, first
coordinates are at) 0 0 - which is the top-left corner of the box, then goes to 0 100% - which is
bottom-left corner of the box and then finally to 100% 50% which is nothing but the right-middle point
of the box. These paths are self closing (that is, the starting point will be the ending point) and so
the final shape is that of a triangle.

This can also be used on an element with an image or a gradient as background.

View Example

Output:

https://riptutorial.com/ 86