CSS to achieve chamfering effect

Welcome to my public account: front-end detective

I saw such a chamfering effect in a recent project, as shown below

It is a normal rectangle, and then it is "cut" a piece, and it is cut along the upper right corner . So, how does this layout work?

1. Adaptive way

There are generally two adaptive methods for this layout. Of course, which one is needed can be based on the actual designer's needs.

1. Fixed distance

No matter how the width and height change, the distance of the chamfer from the top is fixed, as follows

2. Fixed angle

No matter how the width and height change, the angle between the chamfer and the top is fixed, as follows

Let's take a look at the implementation of these two layouts in detail.

Two, fixed distance cutting angle

The fixed distance is better to achieve, just use clip-path . Assuming the distance from the top is 20px , then the coordinates of the four points are

The code implementation is

 div{
  clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
}

This results in a chamfered angle with a fixed distance

3. Chamfering at a fixed angle

This one is a little more complicated. At first, I thought a simple linear gradient would work, like

 div{
  background: linear-gradient(-30deg, #B89DFF 80%, transparent 0);
}

The real-time effect is as follows

It can be seen that although the angle is fixed, the cut corner will not be close to the upper right corner, because the starting point of the linear gradient is the farthest distance along the angle perpendicular to it, as shown below (the screenshot is taken from the MDN official website)

Therefore, the fixed intersection position of the cut corner cannot be guaranteed, and it is more suitable for the small cut corner scene.

Is there any other way? Of course there are

When it comes to angles, in addition to linear gradients, you can also think of conic gradients (conic -gradient ), which can draw a cone pattern at a certain point. Assuming that the fixed angle is 20度 , the illustration is as follows

Then, the angle of the tapered gradient is 250° (270 - 20), and the code is implemented as follows

 div{
  background: conic-gradient(#B89DFF 250deg, transparent 0);
}

The effect is as follows

Because the default center point of the tapered gradient is the midpoint of the container, we need to move to the upper right corner, which can be specified by at , as follows

 div{
  background: conic-gradient(at 100% 0, #B89DFF 250deg, transparent 0);
}

This results in a chamfered angle with a fixed angle

Fourth, to summarize

The above are two implementations of this type of layout, mainly used clip-path and conic-gradient , the following summarizes

1. clip-path can clip the rectangle according to the coordinate point
2. Linear-gradient can also achieve chamfering effect, but it does not stick to the upper right corner
3. Conic-gradient can realize the cone of any angle, and can specify the position of the center point

Of course, it is not limited to this, many irregular layouts can be thought in this direction🤔 Finally, if you think it is good and helpful to you, please like, favorite, and forward ❤❤❤

Welcome to my public account: front-end detective