Clip-path, clip

Clip-path, clip

Html code:

<Div>

</Div>

 

 

Css code:

Img {
Clip-path: polygon (50% 0%, 100% 50%, 50% 100%, 0% 50% );
-Webkit-clip-path: polygon (50% 0%, 100% 50%, 50% 100%, 0% 50% );
-O-clip-path: polygon (50% 0%, 100% 50%, 50% 100%, 0% 50% );
-Moz-clip-path: polygon (50% 0%, 100% 50%, 50% 100%, 0% 50% );
-Ms-clip-path: polygon (50% 0%, 100% 50%, 50% 100%, 0% 50% );
}

 

Ps: The coordinates are from left to right, from top to bottom vertex coordinates, followed by the vertex coordinates and connected into a ry

I have four vertices. Therefore, there can be many quadrilateral vertices. According to my own requirements, this code is to cut the image into a diamond. If not, you can try it.

In my understanding, clip-path uses images to capture irregular images,

Haha, there are so many understandings at present