Css3:clip-path detailed

One of my students, Heather Banks, wanted to achieve an effect he saw in Squarespace:

Based on her past experience, this site HTML CSS is completely within her ability, so I helped her achieve this effect. Showing the nav effect of being cut is a not simple task, I see the picture's first reaction 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-pathis part of the work draft, which is a tool to hide part of an element by shielding and clipping. Although clip-path not supported by mainstream browsers (IE and Firefox), in the webkit browser it is still a small tool for fashion effects.

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

clip-pathSimple works by providing a series of X Y values to create the path. When you use these values to create a full path, the image is cropped according to the dimensions inside the path.

Using 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
Simple application of the elements clip-path can achieve the above effect:

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

Stepwise analysis

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

x0, y:100%x50%, y: 0x100%, 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 used polygon to create a graph and define a path by many pairs , of X values and values separated by commas () Y . Then, we can create different graphs by taking different values.

Round

View the code on Codepen
To create a circle, you need to circle pass in three values: the coordinate 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.

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

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 ellipse provide 4 values: the axis radius of the ellipse, the x y axis radius, the coordinates and coordinates of the position of the position ellipse, and the next x y two values separated by the at keyword and the preceding two values.

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

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 .

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

Each of the above values corresponds to:

inset(<top><right><bottom><left><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)

Create shapes

As you can see, prototypes and rounded corners are limited by a few values and are therefore the Polygons best choice for creating complex graphics. Polygonsthe ability to define multiple sets of points allows us to crop the shapes in various ways.

Comic Textbox

View the code on Codepen

.clipClass {  -webkit-clip-path: polygon(00%,1000%,10075%,7575%,75100%,5075%,075%);}

Star

View the code on Codepen

. clipclass {-webkit-Clip-path:polygon ( -%0%,  the% -%,  -% -%,  the% -%,  the% -%,  -% the%,  -% -%,  to% -%, 0  -%, Panax Notoginseng% -%);}

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 one to the shape hover and use the transition properties to create a smooth effect. Remember, however, that the initial default state we created must hover use the same coordinate system as all States.
View the code on Codepen

. animateclass {-webkit-Clip-path:polygon ( -%0%, 0%0%, 0% -%, 0% the%, 0% -%,  -% -%,  the% -%,  -% -%,  -% -%,  -%0, the%0, -%0);}. Animateclass:hover {-webkit-Clip-path:polygon ( -%0%, 0% -%,  -% -%, 0% the%,  -% -%,  -% -%,  the% -%,  -% the%,  -% -%,  -% -%,  the%0%,  -% -%);}

Source: http://www.ido321.com/1593.html

Css3:clip-path detailed