First of all, let’s talk about the clip-path attribute. I have never seen this clip-path attribute before. After searching on the Internet, it turns out that clip-path means ‘cut’.
clip-path:polygon(x,y) attribute, x in polygon(x,y) represents the position of the abscissa (px %), and y represents the position of the ordinate (px %).
In the final analysis, this clip-path cutting is just like photoshop. It can replace photoshop to cut pictures. However, the difference between code and ps is that the code needs to find the path manually, while ps can directly use the magic wand.
This is the picture I just cut with clip-path:
In fact, svg can also make path diagrams. svg also has clippath attribute.
Original image address: http://images.cnblogs.com/cnblogs_com/hao5599/678419/o_20150314.jpg