Detailed introduction to the Clip-path properties of CSS3

First, the warm reason

About CSS3 Clip-path, wrote an article called "Css3/svg Clip-path Path Clipping mask Properties" in front of Christmas Eve last year. But a brief introduction, a lot of content is a stroke.

Clip-path in CSS3 can mask many shapes, such as rectangular rectangle, round circle, oval ellipse, polygon polygon, and inset clipping.

Among them, polygon polygon construction frequently appeared in my vision, I do not know is covet my beauty or other reasons, in short, it succeeded, success has aroused my concern. Therefore, according to the abuse of the drama script has always been urine, the male and the Lord X has a lot of emotional entanglements. Here deliberately presented to everyone, to meet the nature of gossip.

Second, forming

The predecessor of Clip-path is SVG, so our coordinates are two-dimensional.

The function of polygon is to follow the coordinates of two-dimensional points, then line up, and finally the area formed is our mask area.

Clip-path is not very popular because of its browser compatibility issues. Many IE browser alignment properties are not very supported. Let's take a look at his browser compatibility:

We see IE is completely unsupported, try to use WebKit kernel, need to add kernel prefix-webkit-

Look at this effect and crop this div.

The code is as follows:

<div class= "Haorooms-small" style= "Background-image:url (' http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/ Idtga8h3.png '); " >
</div>

. 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 {
/* The latest specification (no positioning requirements), * *
Clip-path:inset (10px 20px 30px 40px); /* or "none" * *
/* value refers to top, right, bottom, left four points * *
}
The inset () function in Clip-path's attribute value has four values, representing Top/left and bottom/right four points, and loops a rectangular area. The parts outside this rectangular area will be trimmed and hidden away.

Other attribute applications of Clip-path

. clip-me {

/* Refer to 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 */

/* Rounded Corner * *
Clip-path:inset (10% 10% 10% 10% round 20%, 20%);

}
Examples of SVG clipping paths:

<clippath id= "Clipping" >
<circle cx= "cy=" r= "/>"
<rect x= "y=", "width=" height= "" "/>"
</clipPath>