头图

CSS to achieve chamfering effect

XboxYan
中文
Welcome to my public account: front-end detective

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

image-20220317162231279

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

image-20220317145726029

2. Fixed angle

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

image-20220317150509525

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

image-20220317152234147

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

Kapture 2022-03-17 at 15.27.38

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

Kapture 2022-03-17 at 15.34.44

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)

image-20220317153658412

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

image-20220317155651959

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

image-20220317155925518

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

Kapture 2022-03-17 at 16.03.16

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
阅读 1.3k

前端侦探
致力于有趣的前端探索~
9.8k 声望
10.8k 粉丝
0 条评论
9.8k 声望
10.8k 粉丝
文章目录
宣传栏