Clip-path properties and element usage in CSS3

Based on her previous experience, the HTML and CSS of this site are entirely within her capabilities, so I helped her achieve this effect. Showing the effect of NAV being cut is an easy task, and the first reaction I see is to create an image that matches a partially cropped background and then set it to a after element. The problem is that at least the response problem needs to be addressed, and the response is not entirely controllable.

Understanding CSS Properties: Clip-path
Clip-path is part of the work draft, which is a tool for hiding parts of elements by shielding and tailoring them. Although Clip-path is not supported by mainstream browsers, including IE and Firefox, it is still a small tool for fashion effects in WebKit browsers.

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 circles, ellipses, and polygons in different shapes, and creativity is the only limit.

A simple triangular cut

Simply applying clip-path to elements can achieve the above effect:

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

Stepwise analysis

Much like locating attributes, we need to consider x and Y values. The x:0 and y:0 representations start at the upper-left corner of the element and move from the top 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 points are actually created:

x:0, y:100%
x:50%, y:0
x:100%, y:100%

This simple path begins in the lower left corner, moves horizontally 50%, reaches the top position, 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 using multiple pairs of x and Y values separated by commas (,). Then, we can create different graphs by taking different values.

Round

To create a circle, you need to pass the circle three values: 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 coordinates.

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

Elliptic

Most of the time, you don't need a simple circle, but an ellipse.

To implement an ellipse, you need to give Ellipse 4 values: The x-axis radius of the ellipse, the Y-radius, the x-coordinate and the y-coordinate of the position where the ellipse is positioned, and the following two values are separated by the AT keyword and the preceding two values.

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

Illustrations

(There are errors in the old version of Chrome)


Because the edges of the polygon are sharp, so it may not be what you want, you want to create rounded rectangles, so let's look at the value of inset. Inset uses four values (corresponding to the "upper right Left" order) to set the fillet radius.

. clipclass {
-webkit-clip-path:inset (25% 0 25% 0 round 0 25% 0 25%);
}

Each of the above values corresponds to the following:

Inset (<top> <right> <bottom> <left> round <top-radius> <right-radius> < Bottom-radius> <left-radius>)
Its shorthand form:

. clipclass {
-webkit-clip-path:inset (25% 0 round 0 25%);
}

Quick reference

Circle:circle (radius at x-axis y-axis)
Ellipse:ellipse (X-rad Y-rad at x-axis y-axis)
Polygon:polygon (x-axis y-axis, x-axis y-axis, ...)
Inset:inset (top right bottom left round Top-radius right-radius Bottom-radius Left-radius)

Creating shapes

As you can see, prototypes and rounded graphics 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 use a variety of ways to cut graphics.

Comic Textbox

. clipclass {
-webkit-clip-path:polygon (0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
Star
Star
View the code on Codepen

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

Animation

Now that we've learned all kinds of graphics and how to create them, how do we use these graphs to create the effects we want?
Apply a hover to the shape and use the gradient properties to create a smooth effect. But keep in mind that the initial default state we create must use the same coordinate system with all hover states.

. animateclass {
-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);
}
. animateclass:hover {
-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%);
}