CSS | Irregular picture Clip-path__web

Source: Internet
Author: User

"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"


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:

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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.