preface

CSS cutting and mask related attributes used in general is less, but recently met a problem when I write project, want to give a picture on a white mask, synthetic effects, this will have to use the CSS mask related properties, by the way, the cutting properties to study together, make a summary, then enter the body

clip-path

Clip is the first attribute used for clipping in the CSS. However, the clip feature has been deleted from the Web standard due to the new standard. Clip-path is recommended

grammar


represents the path of the clipped element with < URL >

A shape whose size and position are defined by the < geometry box > value. If no geometry box is specified, the border will be used as a reference box. If stated together, it will provide the corresponding reference box for the base shape. Through customization, it will utilize the determined box edges to include any shape of the edges

Let’s look at the properties one by one, starting with basic-Shape. Basic-shape provides several functions, starting with the most commonly used function: inset()

inset

Inset ({1,4} [round]? Inset stands for square clipping. The function provides five parameters. The first four parameters represent the offset of the top, right, bottom and left edges of the interpolated rectangle and the associated box model

The literal meaning may not be easy to understand, but here’s an example:

<div class="wrap">
    <img class="lake" src=".. /img/lake.jpg">
</div>
Copy the code
.wrap {
  display: inline-block;
  line-height: 1;
  background-color: # 000;
}
.lake {
  width: 200px;
}
Copy the code

.lake {
  width: 200px;
  clip-path: inset(10px 15px 20px 25px round 10px);
}
Copy the code


circle( [

]? [at ]? Circle represents a clipping circle. The function provides two optional arguments, the radius of the first circle and the position of the center of the second circle

Here’s an example:

.lake {
  width: 200px;
  clip-path: circle(50px at 80px 80px);
}
Copy the code

.lake {
  width: 200px;
  clip-path: circle(50px at center);
}
Copy the code


ellipse( [

{2}]? [at ]? ) Ellipse represents ellipse clipping and provides three parameters: the first parameter is the X-axis radius, the second parameter is the Y-axis radius, and the third parameter is the position of the center of the circle

Here’s an example:

.lake {
  width: 200px;
  clip-path: ellipse(100px 50px at 100px 100px);
}
Copy the code

.lake {
  width: 200px;
  clip-path: ellipse(100px 50px at top);
}
Copy the code


polygon( [

,]? [


]#) Polygon represents a polygon clipping. The first argument represents the polygon filling rule, with optional values nonzero and evenodd. The second argument is the set of polygon vertex coordinates


Here’s an example:

.lake {
  width: 200px;
  height: 200px;
  clip-path: polygon(50%, 0% and 61% 35%, 98%, 35% and 68% 57%, 91%, 79% 50% 70% and 21% 91%, 32% 57%, 35%, 2% 39% 35%)}Copy the code

The url


url()

The clip-path url() argument is not clipped to a link address, but to an SVG path for clipping elements, for example:

<div class="wrap">
  <img class="lake" src=".. /img/lake.jpg">
  <svg width="0" height="0">
    <defs>
      <clipPath id="clip">
          <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z">
          </path>
      </clipPath>
   </defs>
  </svg>
</div>
Copy the code
.lake {
  width: 200px;
  clip-path: url(#clip)
}
Copy the code

Cropped reference frame

Cut out of the reference frame is referring to the cutting element reference dialog box, margin values – box | border – box | padding – box | content – box | the fill – box | stroke – box | view – box |, generally used with basic – shape, for example:

.lake {
  width: 200px;
  clip-path:margin-box inset(10px 15px 20px 25px round 10px);
  background-color: # 000;
}
Copy the code

I won’t go into the details here, but like the CSS box model, there is another reason why this value is not supported on Chrome, but is available on Firefox

Browser support

CSS properties are as powerful as the browser supports them. It doesn’t matter if the browser doesn’t support them.

caniuse

Clip – path animation

With the basic syntax and browser support covered, let’s look at a simple application of clip-Path: clip-Path animation.

 @keyframes shape {
  from {
    clip-path: polygon(50%, 0% and 60% 40%, 100%, 50% and 60% 60%, 100%, 50% 40% 60% and 0% 50%, 40%, 40%); }to {
    clip-path: polygon(50%, 30% and 100% 0%, 70%, 50% and 100% 100%, 70%, 50% 0% 100% and 30% 50%, 0%, 0%); }}.lake {
  width: 200px;
  clip-path: polygon(50%, 0% and 60% 40%, 100%, 50% and 60% 60%, 100%, 50% 40% 60% and 0% 50%, 40%, 40%);animation: 2s shape infinite alternate ease-in-out;
}
Copy the code

conclusion

Clip-path is an uncommon CSS attribute. It has recently been used in image editing, so this article gives a brief introduction to the use of clip-path. The power of clip-path needs to be experienced in your own projects. If there is a mistake or not rigorous place, welcome criticism and correction, if you like, welcome to praise