How to use the clipping property of Clip-path region in the detailed CSS

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>