CSS | Irregular picture Clip-path__web

"I'm going to start with the wind, to transform the web, to stimulate the image market, to improve the code, the Jade tree, the style of the CSS expert, my name is shear path, English name Clip-path."

--preface, from the "tricky expert"

Body

Say our last sermon: How to use CSS to achieve polygons, the principle is to use the width, height of 0, combined with border, a pure polygon under the code was born. So, the picture, I suddenly want to let the picture also shows the irregular, how to get. Today is about how to use CSS to achieve the "irregular" picture, first on a simple effect chart:
Effect chart

Just get this picture, look simple, it is missing a corner ah, what is difficult, I can use, with, what. Clip seems to be no good, only cut the rectangle, not to mention it has to quit the Web. Draw the width and height of 0 polygon shape. No way.

In the preface of this article, there is a word, called Clip-path, yes, it is used.

We write the front of the belief that the beginning of the picture is a rectangle, can be used Border-radius into a circle, or directly an irregular png thrown up, clip-path how to break it.
Initial diagram

Enlarge The Recruit, Clip-path:

-webkit-clip-path:polygon (100% 0, 100% 100%, 0 100%, 0 30%);

And then the beginning of the effect diagram appears, the code is as follows:
CSS Code

Clip-path is a cut path, the above annotation is the other attributes of Clip-path, and Polygon believes that it will be using a more than a property, it can create irregular pictures, polygon (coordinates, coordinates ...), these coordinates to the final display of the area, such as:
-webkit-clip-path:polygon (50% 0, 100% 50%, 50% 100%, 0 50%);

Another example:
Pentagram

Can add some animation, the code see below:

. rec-pic {position:absolute; width:250px height:200px; Background-color: #fcc; animation:star 1s alternate infinite; }

. pic {width:250px; height:200px background:url (. /images/pic.jpg) No-repeat Center; Background-size:cover; }

@keyframes Star {

0% {-webkit-clip-path:polygon (50% 0, 60% 30%, 100% 30%, 65% 60%, 75% 100%, 50% 75%, 25% 100%, 35% 60%, 0 30%, 40% 30%);}

100% {-webkit-clip-path:polygon (50% 10%, 60% 20%, 80% 30%, 65% 50%, 65% 80%, 50% 76%, 35% 80%, 35% 50%, 20% 30%, 40% 20%) ;}

}

56789 side of the picture display area is not a cinch, of course, can also produce:
MDN Effect Chart

This is the use of-webkit-clip-path:url (#cross); "#cross" is the svg of their own painting, arbitrary, creating the image they want. Wonderful, wonderful.

More reference Clip-path documents: Https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Jianshu: HTTP://WWW.JIANSHU.COM/P/1C241FDCA3A1