现代 CSS 圆角外凸标签
Quite a while back I made a set of “round out” tabs, where the literal tab part of the UI would connect to the content below with a rounded edge that flared out as it connected. A bit tricky of a situation, even now!
很久以前，我做了一组“round out”标签，让 UI 中的标签部分以圆角外扩的方式连接到下方内容。即便放到现在，这也是个有点棘手的场景！
That old school solution used four additional elements per tab. Two to place a square on the bottom edges of the tab, and then larger circles to hide everything but the flared part.
那种老派方案每个标签要用 四个 额外元素：两个放在标签底边的小方块，再用更大的圆形把除了外扩部分以外的区域全部遮住。
Here’s that (again: old!) demo:
这是那个（再次强调：旧的！）演示：
I’m so hyped on shape(). It’s an amazing addition to CSS, giving us a primitive that can draw, well, anything you could draw with a pen tool.
我对 shape() 超级兴奋。它是 CSS 的惊人补充，给了我们一个原语，可以画出——嗯，任何你能用钢笔工具画出的东西。
In our case we’re going to use the shape() primitive with clip-path to carve a tab shape out of a rectangle. No extra elements!
在我们的示例中，我们将使用 shape() 原语配合 clip-path 从一个矩形中雕刻出标签形状。不需要额外的元素！
.tab { clip-path: shape( /* do commands to cut out a tab shape */ ); }Code language: CSS (css)
.tab { clip-path: shape( /* 用命令切出标签页形状 */ ); }代码语言：CSS (css)
The shape() function takes all these commands to do the drawing. Depending on how complex a thing you are trying to do, the syntax is fairly human-readable.
shape() 函数接受所有这些 命令 来完成绘制。根据你要做的事情有多复杂，语法相当易读。
Let’s slowly walk through hand-building this tab shape. It’ll be extra cool because:
让我们一步步亲手构建这个标签形状。这会格外酷，因为：
- It’s not completely fixed shape. Parts of it can be fixed coordinates, and other parts can be flexible. You’ll see, it’s awesome.
- 它并不是完全固定的形状。部分可以是固定坐标，部分可以是灵活的。你会看到，这很酷。
- We can variablize it, meaning we can adjust the look on the fly.
- 我们可以把它变量化，意味着可以即时调整外观。
Elements start out as rectangles. Ours are going to be horizontally longer rectangles just by virtue of them having text in them pushing them that direction. Then a bit of padding pushing those inline edges more than the block side edges.
元素一开始都是矩形。由于里面有文字把它们往水平方向撑开，我们的标签就成了横向更长的矩形。再加上内边距，行向边缘会比块向边缘被推得更远。
.tab { display: inline-block; ...