This is the 19th day of my participation in the August More Text Challenge

Question origin

Just yesterday, we introduced a clip-path property value in CSS: Clip-path can be used to capture a shape in a specified way, and we introduced two values of clip-path:

  1. According to the box model, the values are: margin-box, border-box, etc

  2. Taking functions, such as the polygon function, we learned that we can draw, or intercept, a polygon by:

    clip-path: polygon(x1 y1, x2 y2, x3 y3, ....)
Copy the code

So, what other nice clip-path values are there to draw graphs?

Today we’re going to look at other functions.

inset

The modification function is defined as a rectangle with four parameters representing the offset from the upper, right, lower and left boundaries of the outer box model. Like margin and padding, you can also set 4 offsets with 1,2, and 4 values. (I just learned that this shorthand is called marginal shorthand grammar.)

As shown below, the second line, similar to border-radius, sets the radians of the corners of the screenshot.

clip-path: inset(22% 12% 15px 30px);
clip-path: inset(22% 12% 15px 30px round 6px);
Copy the code

As shown in the figure:

Complete graphics:

Screenshot code:

clip-path: inset(10% 20% 20% 20% round 280px 10px 10px 280px);
Copy the code

Screenshot effect:

circle

See the meaning of the word, cut a circular pattern, function parameters are explained as follows:

clip-path: circle(6rem at 0rem 0rem);
Copy the code

This code shows that in the box model, the coordinates (0rem, 0REM) are taken as the center of the circle, and the length of 6rem is taken as the radius R. The circular pattern is captured in the screenshot. Of course, this position will look like a sector.

The above image is still used as the original image, and the screenshot effect of the following code:

clip-path: circle(200px at 40% 40%);
Copy the code

ellipse

Also see the word to know the meaning, draw the ellipse, its meaning is:

Ellipse (x radius y radius as x y)Copy the code

X and y represent the center of the circle. The circle contrast is not hard to understand.

Clip-path: Ellipse (200px 100px at 40% 40%);

The screenshot looks like this:

It left an unresolved problem

Can a graph use two clip-path screenshot functions?

For example, if I take a screenshot of a full image using circle first, how can I take a screenshot of the image after taking a screenshot? Does CSS allow this?