Shulou(Shulou.com)06/03 Report--

This article is about how to use clip-path in CSS3. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Understand the CSS attribute: clip-path

Clip-path, which is part of the working draft, is a tool that hides parts of elements by masking and trimming. Although clip-path is not supported by mainstream browsers (including IE and Firefox), it is still a fashion gadget in webkit browsers.

Note that the-webkit- prefix is required in modern browsers.

Clip-path simply works by providing a series of X and Y values to create paths. When you create a full path with these values, the image is cropped to the size 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 triangle cut

View the code on codepen

The above effect can be achieved by simply using clip-path on the element:

.clipClass {- webkit-clip-path: polygon (0100%, 500,100%);}

Stepwise analysis

Much like positioning attributes, we need to consider X and Y values. XRV 0 and YRU 0 start at the upper left corner of the element and move from the upper left corner. XRO 100% refers to the right side of the element, and YRO 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 starts at the lower left corner, moves horizontally by 50%, reaches the top position, and then moves horizontally to 100%, vertically down to the bottom, to the third coordinate point. The triangle will come out.

Shape

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

Circle

View the code on codepen

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

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

Ellipse

View this code on codepen

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

In order to implement an ellipse, you need to provide ellipse with four values: the x-axis radius of the ellipse, the y-axis radius, the x-coordinate and y-coordinate of the positioning ellipse, and the last two values are separated from the first two values by the at keyword.

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

Illustration

(there is an error in the older 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 uses four values (corresponding to the order of "top right, bottom left") to set the fillet radius.

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

The above values correspond to:

Inset (round)

Its abbreviated form is:

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 rightright bottombottom left round top-radius rightright-radius bottombottom-radius left-radius)

Create a shape

As you can see, prototypes and fillet shapes 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 cut graphics in a variety of ways.

Comic Textbox

View the code on codepen

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

Star

View the code on codepen

Animation

Now that we know about the various graphics and how to create them, how can we use them to create the effects we want?

Apply a hover to the shape and use the transition attributes to create a smooth effect. But keep in mind that the initial default state we create must use the same coordinate system as all hover states.

View the code on codepen

.animateClass {- webkit-clip-path: polygon (20%, 0%, 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100%, 80% 0, 50%) } .animateClass: hover {- webkit-clip-path: polygon (50%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70%, 100% 20%, 80% 0%, 50% 30%);} Thank you for your reading! This is the end of the article on "how to use clip-path in CSS3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.