This is the second day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Recently, in the process of building my own micro front-end application, I found a very useful CSS property that I had never known before: Clip-path. After some exploration, I decided to put what I have learned into a paper for future review

Let’s take a look at the clip-path property

Predecessor of clip-path: Clip

Before we get to clip-path, let’s turn our attention to its predecessor: Clip

The clip attribute is used for clipping elements. It can be clipped within the corresponding element by specifying a rectangular area.

/* Clip :rect(50%, 60%, 30%, 50%) is illegal */ div{position:absolute; clip:rect(0px,60px,200px,0px); clip:rect(50px 250px 250px 50px); /* Compatible with IE6, IE7, need to remove commas between values */}Copy the code

As you can see, the usage is simple: set top, right, bottom, and left at the top left corner of the corresponding element, and set the positioning of the element to absolute or fixed. Although simple to use, it has the following two disadvantages:

  • This applies only to absolute and fixed elements, but not to relative and static elements
  • Since only rect() is available, it can only be used to crop rectangles

Let’s see how compatible it is

The compatibility of Clip is good, but it is not used in many scenarios due to the two disadvantages mentioned above. The main character of this article is clip-path, which is designed to solve these two pain points

Born to be a hero

Clip-path can be applied to any element. The first restriction of clip is not included, so the application scenario is greatly expanded. It supports setting three properties, listed below:

  • Clip-source: You can import the path of clipped elements from SVG using the form clip-path: URL (resources.svg#c1)
  • basic-shapeThere are many types of functions to draw graphs.
    • Circle, used to cut out a circle
    • Ellipse, used to crop an ellipse
    • Inset, used to crop out the rectangle
    • Polygon, one of the most powerful apis for cropping arbitrary shapes
  • geometry-box: can be regarded as the coordinate system of the clipping region. The API coordinates in the clipping region will be positioned with the specified box. If not specified, the default value is border-box, and its values are listed as follows:
    • margin-box
    • border-box
    • padding-box
    • content-box
    • fill-box
    • stroke-box
    • view-box

As you can see from the properties, clip-path is very powerful, with which we can achieve any kind of creative imagination

The specific uses of each API are listed below

*/ /* Circle (radius at X-axis Y-axis) To create a circle, you need to pass in three values to circle: the coordinates of the center of the circle(x and y values) and the radius. When defining the radius of a circle, we can use the at keyword to define the coordinates of the center of the circle. */ div { clip-path: circle(50% at 50% 50%); } /* ellipse(x-radius y-radius at X-axis Y-axis)} /* ellipse(x-radius y-radius at X-axis Y-axis) The x - and y-radius of the ellipse, the x - and y-coordinates of the location of the ellipse, the last two values are separated by the at keyword from the first two values. */ div { clip-path: ellipse(100px 200px at 50% 50%); } /* inset(<top> <right> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius> To cut the rectangle and set the fillet radius. */ div { clip-path: inset(25% 0 25% 0 round 0 25% 0 25%); clip-path: inset(25% 0 round 0 25%); /* polygon(x1-axis y1-axis, x2-axis y2-axis,...) It is the most powerful API that allows us to crop out a graph that includes but is not limited to all of the above apis */ div {clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); }Copy the code

Finally, post the compatibility screenshot of Clip-path

We can see that the compatibility of this property is not optimistic, IE does not support the whole system, Chrome will not fully support until 54, so this property is powerful, but relatively unpopular situation, because of the historical burden of the reason so great CSS properties can not be widely used, it is a pity ~

conclusion

CSS is simpler than other languages, but there are still a lot of places to explore, such as clip-path and other obscure but very powerful attributes, only to continue to study to expand their horizons, so come on, coquettes! 🤪

A little request

Now that you have seen here, if you like my article, then please move your finger, help my article point like or receive a hide, XDM support is the biggest motivation for my creation, their own stand-alone really not fun!

Recently, I have set up a personal blog, which will be the first to publish the articles I write, I hope that interested partners to visit, if you can comment on the better, hey hey, look forward to your visit oh ~