Recently, I tried some stylized CSS, so I began to pay attention to some CSS properties that I usually don’t pay attention to when writing business. Today I’m going to introduce you to clip-path. And what you can do with it.

The effect

First let’s look at the effect

1. Cyberpunk bezel

Code: codepen. IO / 1171326722 /…

2. Cyberpunk buttons

Code:Codepen. IO / 1171326722 /…

3. Rotate the borders

Code:Codepen. IO / 1171326722 /…

Address: bennettfeely.com/clippy/

Usage:

The clip-path function is the same as the name. As long as our imagination is big enough to cut the elements into corresponding shapes, we can make a lot of amazing effects. Clip-paths can be clipped in several different ways, including SVG paths, box models, basic polygon paths, and so on

1.svg

clip-path: url();
Copy the code

Define an SVG path and add clip-path: URL (#id) to the element; attribute

//html
<svg height="0" width="0"> 
    <defs> 
        <clipPath id="svgPath">
            <path id="heart" d=M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
        </clipPath> 
    </defs> 
</svg>
<img class = 'clipImg' src="https://w.wallhaven.cc/full/z8/wallhaven-z8dg9y.png" />
Copy the code
//css
.clipImg{
  clip-path:url(#svgPath)}Copy the code

Results the following

2. Box model

As the name suggests, it cuts to the box model

  1. clip-path : margin-box: Cut according to margin box
  2. clip-path : border-box: Cut according to the border box
  3. clip-path : padding-box: Cut according to the padding box
  4. clip-path : content-box: Cut according to content box
  5. clip-path : fill-box: Cutting according to object bounding box
  6. clip-path : stroke-box: Cutting according to stroke bounding box
  7. clip-path : view-box: Cut according to the SVG viewport

3. Geometry

  1. Polygon:

Usage: clip – path: polygon (` ` 50% 0%, 0% 100% ` ` ` 100% 100% `);

The polygon parameter represents points, and clip-path is clipped by the paths connected by these points.

Effect:

  1. Circle circle:

Usage: clip-path: circle(‘ 50% ‘at’ 50% 50% ‘); .

The 50% in front of the at means the radius is 50%, and the 50% in the back is the center of the circle

Effect:

Clip-path: ellipse(‘ 25% ‘ ‘40%’ at ‘50% 50%’);

The 25% and 40% before at represent the x-y length of the ellipse, and the 50% and 50% after at represent the center of the circle

Effect:

4. An inset: usage clip – path: an inset (8% ` ` ` 11% ` ` 19% ` ` ` 34%);

The four values are the distances from the top, right, bottom, and left edges to the edge of the element

Effect:

Having said that, recommend a very useful website. If you’re not familiar with clip-path clipping, you can go to bennettfeely.com/clippy/, which can quickly cut out some basic graphics and attach some code. The case I wrote was implemented using this site.