The clip-path attribute of CSS is an updated version of the clip-path attribute. They are used to “clipping” elements. The difference is that clip can only be applied to elements whose position is absolute or fixed and the clipping area can only be square. Clip-path is more powerful. It can crop elements with any shape, and it has no requirement on the positioning of elements. Based on this feature, clip-path is often used to achieve some cool animation effects.

Such as:

Parallax advertising effect:

Implementation please refer to: CodePen

Menu bar popup effect:

Implementation please refer to: CodePen

Clip Path classification

There are several categories of clip-path, which are:

  • Basic-shape: basic shapes, including inset(), circle(), ellipse(), polygon()

  • Clip-source: References an SVG

    using the URL () method as the clipping path

  • Geometry-box: When used alone, the edge of the specified box is used as a clipping path, or in conjunction with basicshape, to define a Reference box for clipping. (This property is not covered in this article due to low browser support.)

First, the Basic Shape

1. Inset

Inset () is used to define an interpolated rectangle, that is, a rectangular area inside the clipped element.

Parameter type: inset(

{1,4} [round

]?)

Where shape-arg is the distance from the top right, bottom and left vertices of the rectangle to the edge of the clipped element (similar to margin and padding), and border-radius is an optional parameter, used to define the rounded corner of the border.

DEMO:

html:

<img class="img inset" src="http://source.unsplash.com/random/1000x1000" />
Copy the code

css:

.inset {
  clip-path: inset(0);

  &:active {
    clip-path: inset(100px 200px 10% 20% round 20px); }}Copy the code

2. Circle

Circle () is used to define a circle.

Parameter type: circle([

]? [at ]? )

Shape-radius is the radius of the circle, and position is the position of the center of the circle.

If shape-RADIUS is a percentage, 100% is equivalent to:

sqrt(width^2+height^2)/sqrt(2)
Copy the code

Width and height are the width and height of the clipped element respectively.

DEMO:

html:

<img class="img circle" src="http://source.unsplash.com/random/1000x1000" />
Copy the code

css:

.circle {
  clip-path: circle(100px at center);

  &:hover {
    clip-path: circle(50%at center); }}Copy the code

3. Ellipse

Ellipse () is used to define an ellipse.

Parameter type: ellipse([

{2}]? [at ]? )

Shape-radius is the radius of the x and y axes of the ellipse, and position is the position of the center of the ellipse.

DEMO:

html:

<h2>Ellipse (click)</h2>
<div class="img-box">
  <img class="img ellipse" src="http://source.unsplash.com/random/1000x1000" />
</div>
Copy the code

css:

.ellipse {
  clip-path: ellipse(200px 500px at 50% 50%);

  &:active {
    clip-path: ellipse(500px 500px at 50% 50%); }}Copy the code

4. Polygon

Polygon () is used to define a polygon.

Parameter type: polygon([

,]? [

]# )

Fill-rule is a fill rule that defines the boundary of a polygon through a series of points.

DEMO:

html:

<img class="img polygon" src="http://source.unsplash.com/random/1000x1000" />
Copy the code

css:

.polygon {
  clip-path: polygon(0% 50%.50% 0%.100% 50%.50% 100%);

  &:active {
    transform: rotate(720deg);
    clip-path: polygon(0% 0%.100% 0%.100% 100%.0% 100%); }}Copy the code

Second, the Clip Source

That is, by referring to an SVG clipPath element as the clipping path. For example, use

to define a circle:

html:

<svg>
  <defs>
    <clipPath id="svgCircle">
      <circle cx="500" cy="500" r="400" />
    </clipPath>
  </defs>
</svg>

<img class="img svg-circle" src="http://source.unsplash.com/random/1000x1000" />
Copy the code

css:

.svg-circle {
  clip-path: url("#svgCircle");
}
Copy the code

Effect:

Clippy

If calculating and drawing a graph on your own is too much of a hassle, you can use Clippy, an online clip-path drawing tool that includes most common graphs as well as visually drawing custom ones.

Clippy:

Tricks by Day. Quantitative change causes qualitative change. I hope you can learn more every Day with me and make technology more interesting.

All the examples will be put together in my tricks-by-day Github project. You are welcome to visit 😊