CSS中的弯曲盒子切口

This post explores a trick to create the illusion of an element appended to another with a gap and curved edges at the corners. It’s useful for visually demarcating supplementary elements or user controls in a card module.

这篇文章探讨了一种技巧，可以创建一个元素附加到另一个元素的错觉，并在角落处留有间隙和圆角。这对于在卡片模块中视觉上划分补充元素或用户控件非常有用。

An example:

一个例子：

Let’s start with the HTML and code a simple design.

让我们从HTML开始，设计一个简单的布局。

<div class="outer"> <div class="inner"></div> </div>Code language: HTML, XML (xml)

<div class="outer"> <div class="inner"></div> </div>代码语言：HTML, XML (xml)

Use a nested element (.inner) or a stacked element to create the small box. The key is for the small box to overlap the larger one.

使用嵌套元素（.inner）或堆叠元素来创建小框。关键是小框要与大框重叠。

.outer { width: 375px; aspect-ratio: 1; border-radius: 12px; background: dodgerblue; .inner { width: 160px; height: 60px; border-radius: inherit; background: skyblue; } }Code language: CSS (css)

.outer { width: 375px; aspect-ratio: 1; border-radius: 12px; background: dodgerblue; .inner { width: 160px; height: 60px; border-radius: inherit; background: skyblue; } }代码语言：CSS (css)

The larger square box (.outer) and the smaller rectangle box (.inner) share the same border-radius value (12px).

较大的方形框（.outer）和较小的矩形框（.inner）共享相同的 border-radius 值（12px）。

Add an outline of the same color as the page.

添加一个与页面相同颜色的outline。

.inner { outline: 8px solid white; }Code language: CSS (css)

.inner { outline: 8px solid white; }代码语言：CSS (css)

That’s all we need to do with the inner box.

这就是我们对内框需要做的全部。

Add two small radial-gradient() background images to the larger box’s background.

为较大框的背景添加两个小的 radial-gradient() 背景图像。

1. Position the images where the smaller box’s corners overlap, with a negative offset equal to the outline size (8px).
2. 将图像放置在较小框的角落重叠处，偏移量为负值，等于 轮廓 大小（8px）。
3. The border radius (12px) plus the smaller box’s outline (8px) equals the images’ size (20px 20px).
4. 边框半径（12px）加上小框的outline（8px）等于图像的大小（20px 20px）。
5. The gradients are transparent circles the same size as the border radius (12px), with the rest white
6. 这些 渐变 是与 边框半径（12px）大小相同的...