CSS3 in the Clip-path use strategy

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

View the code on Codepen

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

CSS code copy content to clipboard

. 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:

CSS code copy content to clipboard

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

View the code on Codepen

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.

CSS code copy content to clipboard

. clipclass {

-webkit-clip-path:circle (50% at 50% 50%);

}

Elliptic

View This code on Codepen

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.

CSS code copy content to clipboard

. clipclass {

-webkit-clip-path:ellipse (30% 20% at 50% 50%);

}

Illustrations

(There are errors in the old version of Chrome)

View the code on Codepen

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.

CSS code copy content to clipboard

. clipclass {

-webkit-clip-path:inset (25% 0 25% 0 round 0 25% 0 25%);

}

Each of the above values corresponds to the following:

CSS code copy content to clipboard

Inset ( round )

Its shorthand form:

CSS code copy content to clipboard

. clipclass {

-webkit-clip-path:inset (25% 0 round 0 25%);

}

Quick reference

CSS code copy content to clipboard

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 rightright Bottombottom left round Top-radius rightright-radius Bottombottom-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

View the code on Codepen

CSS code copy content to clipboard

. clipclass {

-webkit-clip-path:polygon (0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

}

Star

View the code on Codepen

CSS code copy content to clipboard

. 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.

View the code on Codepen

CSS code copy content to clipboard

. 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%);

}