CSS3: clip-path detailed explanation_html/css_WEB-ITnose

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

Based on her past experience, the HTML and CSS of this website were completely It was within her ability, so I helped her achieve this effect. Displaying the effect of a nav being cropped is a non-trivial task. My first reaction when I saw the image was to create an image that matches the partially cropped background, and then set it as an after element. The problem is, at least reactivity has to be addressed, and reactivity is not entirely controllable.

Understand the CSS properties: clip-path

clip-path is part of the working draft and is a tool for hiding parts of an element through masking and clipping. Although clip-path is not supported by mainstream browsers (including IE and Firefox), it is still a small tool for achieving stylish effects 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 a path. When using these values ​​to create a full path, the image will be cropped to the internal dimensions of the path.

Using clip-path, we can create different shapes such as circles, ellipses and polygons, creativity is the only limit.

A simple triangle clipping

View the code on codepen
Simply apply clip-path to the element to achieve the above effect:

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

Step-by-Step Analysis

Much like positioning attributes, we need to consider X and Y values. X:0 and Y:0 means 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 points are actually created:

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

This simple path starts from the lower left corner, moves 50% horizontally, reaches the top position, and then moves horizontally to 100 % position, return vertically downward to the bottom and reach the third coordinate point. The triangle comes out.

Shape

In the above example, we use polygon to create a shape and define a path through pairs of X and Y values ​​separated by commas (,). We can then create different graphs by taking different values.

Circle

View the code on codepen
In order to create a circle, you need to pass in three values ​​​​to circle: the coordinates of the center of the circle (X value and Y value) 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%); }

Ellipse

View this code on codepen
Many times, you don't want a simple circle, but an ellipse.

In order to implement an ellipse, four values ​​need to be provided to ellipse: the x-axis radius of the ellipse, the y-axis radius, the x-coordinate and y-coordinate of the position of the ellipse, the latter two values ​​​​use the at keyword and the first two values ​​separately.

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

Illustration

(bug in old version of chrome)

View the code on codepen
Because the polygon edges are sharp, it might not be for you What you want, what you want to create is a rounded rectangle, so let's look at the value of Inset. Inset uses four values ​​(corresponding to the order of "Top, Right, Bottom, Left") to set the corner radius.

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

The above values ​​correspond to:

inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>)

The abbreviated 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 shape

As you can see, prototype and rounded shapes are limited to a few values, making Polygons the best choice for creating complex shapes. Polygons can define multiple sets of points, allowing us to crop graphics in various ways.

Comic Textbox

View the code on codepen

.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

.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 have learned about various graphics and how to create them, how do we use these graphics to create the effects we want?
Apply a hover to the shape and use transition properties to create a smooth effect. But you need to remember 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%, 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%);}