Clip-path can divide the elements of the page by the size of the set to show the area, or the equivalent of a mask instead of actually cutting a part, here we take a look at the CSS in the Clip-path Area clipping property Use tutorial
The Clip-path in CSS allows you to specify the display area of a page element instead of displaying it all by default.
. clip-me { /* has been marked as deprecated notation * /position:absolute;/* requires absolute and fixed positioning */ Clip:rect (110px, 160px, 170px , 60px); /* or "auto"/*/* value describes a top/left point and a bottom/right point////////////// * The latest specification (no location required), */ Clip-path:inset (10px 20px 30 PX 40px); /* or "none"/// * value refers to top, right, bottom, left four dots */}
There are four values in the inset () function in the attribute value of the Clip-path, which represent Top/left and bottom/right four points, and circle a rectangular area. The portion of the rectangle that is outside the area is clipped and hidden away.
It is important to note that the median value is separated by a space, and the old-fashioned one is with commas.
Example:
To see this effect, the P is clipped.
The code is as follows:
<p class= "Haorooms-small" style= "Background-image:url (' http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/ Idtga8h3.png '); " > </p>
. haorooms-small { background-size:cover; width:300px; height:300px; -webkit-clip-path:polygon (0% 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%); Clip-path:polygon (0% 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%); }
Inset attribute application of Clip-path
. clip-me { /* Latest canonical notation (no location required), */ Clip-path: Inset (10px 20px 30px 40px); /* or "none"/// * value refers to top, right, bottom, left four dots */}
There are four values in the inset () function in the attribute value of the Clip-path, which represent Top/left and bottom/right four points, and circle a rectangular area. The portion of the rectangle that is outside the area is clipped and hidden away.
Other properties of Clip-path application
. clip-me { /* reference an inline SVG <clipPath> path * /Clip-path:url (#c1); /* Refer to an external SVG path * /Clip-path:url (PATH.SVG#C1); /* Polygon * /Clip-path:polygon (5% 5, 100% 0, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* Round * /clip-path:circle (30px at 35px 35px); /* Ellipse * /clip-path:ellipse (65px 30px at 125px 40px); /* Inset-rectangle () will replace inset ()? * /* Rectangle () may appear in SVG 2//// Round corner * /Clip-path:inset (10% 10% 10% 10% round 20%, 20%); }
Examples of SVG clipping paths:
<clippath id= "clipping" > <circle cx= "All" cy= "" "r=" "/> <rect x=" "" "y=" "" Width= " 100 "Height="/> </clipPath>