How to use Clip-path in CSS3

Based on her past experience, the HTML and CSS of this site are entirely within her ability, so I helped her to do this. The effect of NAV cut is a not simple task, I see the first reaction of the picture is to create a matching background that is partially cropped by the image and then set it to an after element. The problem is that the response is at least resolved and the response is not fully controllable.
Understanding CSS Properties: Clip-path

Clip-path is part of the work draft and is a tool for hiding elements that are part of an element by shielding and clipping. Although Clip-path is not supported by mainstream browsers (including IE and Firefox), it is still a small tool for fashion effects in the WebKit browser.

Note that you need to use the-webkit-prefix in modern browsers.

Clip-path simply works by providing a series of x and Y values to create a path. When you use these values to create a full path, the image is cropped according to the dimensions inside the path.

With Clip-path, we can create different shapes such as circles, ellipses, and polygons, and creativity is the only limitation.
A simple triangular cut

View the code on Codepen
Simply applying clip-path to elements can achieve the above effects:

CSS Code copy content to clipboard

1. . clipclass {
2. -webkit-Clip-path:polygon (0 100%, 50% 0, 100% 100%);
3. }

Stepwise analysis

Much like positional properties, we need to consider the x and Y values. X:0 and y:0 represent starting from the upper-left corner of the element and moving from the upper-left corner. x:100% refers to the right side of the element, y:100% refers to the bottom of the element.
For the path created above, the following point is actually created:

CSS Code copy content to clipboard

1. x:0, y:100%
2. x:50%, y:0
3. x:100%, y:100%

This simple path starts at the lower left, moves horizontally 50%, reaches the top position, and then moves horizontally to the 100% position, vertically down to the bottom, to the third coordinate point. The triangle is coming out.
Shape

In the example above, we use polygon to create a graph and define a path by many pairs of X-values and Y-values separated by commas (,). Then, we can create different graphs by taking different values.
Round

View the code on Codepen
To create a circle, you need to pass in three values to the circle: the coordinates of the center (x and Y values), and the radius. When defining the radius of a circle, we can use the AT keyword to define the center coordinate.

CSS Code copy content to clipboard

1. . clipclass {
2. -webkit-Clip-path: Circle (50% at 50% 50%);
3. }

Elliptic

View This code on Codepen
Many times, you don't need a simple circle, but an ellipse.

To implement an ellipse, you need to provide 4 values for the ellipse: the x-axis radius of the ellipse, the y-axis radius, the x-coordinate and the y-coordinate of the position of the ellipse, and the next two values separated by the AT keyword and the preceding two values.

CSS Code copy content to clipboard

1. . clipclass {
2. -webkit-clip-path:ellipse (30% 20% at 50% 50%);
3. }

Illustrations

(There was an error in the old version of Chrome)

View the code on Codepen
Because the edge of the polygon is sharp, it may not be what you want, you want to create a rounded rectangle, so let's take a look at the value of inset. Inset sets the fillet radius by using four values, which correspond to the order of top right and bottom left.

CSS Code copy content to clipboard

1. . clipclass {
2. -webkit-Clip-path: inset (25% 0 25% 0 round 0 25% 0 25%);
3. }

Each of the above values corresponds to:

CSS Code copy content to clipboard

1. Inset (<top> <rightright> <bottombottom> <left> Round < Top-radius> <rightright-radius> <bottombottom-radius> <left-radius> )  

Its shorthand form:

CSS Code copy content to clipboard

1. . clipclass {
2. -webkit-Clip-path: inset (25% 0 round 0 25%);
3. }

Quick reference

CSS Code copy content to clipboard

1. Circle: Circle (radius at x-axis y-axis)
2. Ellipse:ellipse (X-rad Y-rad at x-axis y-axis)
3. Polygon:polygon (x-axis y-axis, x-axis y-axis, ...)
4. Inset: Inset (top right, bottombottom left round Top-radius Right Right-radius Bottombottom-radius left-radius)

Create shapes

As you can see, prototypes and rounded corners are limited by a few values, so polygons is the best choice for creating complex graphics. Polygons can define multiple sets of points, allowing us to crop the shapes in various ways.
Comic Textbox

View the code on Codepen

CSS Code copy content to clipboard

1. . clipclass {
2. -webkit-Clip-path:polygon (0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
3. }

Star

View the code on Codepen

CSS Code copy content to clipboard

1. . clipclass {
2. -webkit-Clip-path:polygon (50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
3. }

Animation

Now that we have a look at the various graphs and how to create them, how do we create the effects we want with these graphs?
Apply a hover to the shape and use the transition properties to create a smooth effect. However, it is important to remember that the initial default state we created must use the same coordinate system as all hover states.
View the code on Codepen

CSS Code copy content to clipboard

1. . animateclass {
2. -webkit-Clip-path:polygon (20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80    % 0, 50% 0);
3. }
4. . animateclass:hover {
5. -webkit-Clip-path:polygon (50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%,    80% 0%, 50% 30%);
6. }

How to use Clip-path in CSS3