How to use the clip-path region clipping property in CSS
This article mainly shows you "how to use the clip-path region clipping attribute in CSS", the content is simple and clear, and I hope it can help you solve your doubts. Let the editor lead you to study and learn how to use the clip-path region clipping attribute in CSS.
Clip-path in CSS allows you to specify the display area of a web page element instead of displaying all of it by default.
.clip-me {/ * has been marked as deprecated * / position: absolute; / * requires absolute and fixed positioning * / clip: rect (110px, 160px, 170px, 60px) / * or "auto" * / / * values describe a top/left point and a bottom/right point * / / * the latest specification (no positioning requirements), * / clip-path: inset (10px 20px 30px 40px); / * or "none" * / / * values refer to top, right, bottom, left four points * /}
In the attribute value of clip-path, there are four values in the inset () function, which represent four points of top/left and bottom/right, respectively, and circle a rectangular area. The area outside the rectangle will be clipped and hidden.
It should be noted that the middle of the value is separated by a space, while the old-fashioned one is separated by a comma.
Example:
Look at this effect, the DIV is cropped.
The code is as follows:
. haorooms-small {background-size: cover; width: 300px; height: 300px;-webkit-clip-path: polygon (0% 50%, 25%, 75%, 100%, 100%, 75% 100%, 25% 100%); clip-path: polygon (0% 50%, 25% 0%, 75% 50%, 100%, 75% 100%, 25%);}
Application of inset attribute of clip-path
.clip-me {/ * latest specification (no positioning requirements), * / clip-path: inset (10px 20px 30px 40px); / * or "none" * / / * value refers to top, right, bottom, left four points * /}
In the attribute value of clip-path, there are four values in the inset () function, which represent four points of top/left and bottom/right, respectively, and circle a rectangular area. The area outside the rectangle will be clipped and hidden.
Application of other attributes of clip-path
.clip-me {/ * reference an inline SVG path * / clip-path: url (# C1); / * reference an external SVG path * / clip-path: url (path.svg#c1); / * Polygon * / clip-path: polygon (55%, 100%, 100%, 75%, 75%, 75%, 100%, 50%, 0%) / * Circle * / clip-path: circle (30px at 35px 35px); / * Oval * / clip-path: ellipse (65px 30px at 125px 40px); / * inset-rectangle () will replace inset ()? * / / * rectangle () may appear in SVG 2 * / / * fillet * / clip-path: inset (10% round 20%, 20%) }
Sample SVG crop paths:
The above is all the content of the article "how to use clip-path region clipping attributes in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
