CSS新特性 corner-shape 轻松创建多样形状

CSS |

为什么这很重要？ border-radius让圆角成为标配，而corner-shape赋予开发者将圆角变形为斜角、凹槽、缺口甚至超椭圆的能力。这不仅是视觉升级，更是解决传统 CSS 图形绘制痛点的钥匙——比如为自定义形状添加完美边框，这在clip-path时代曾是噩梦。

一、corner-shape 的核心机制：语法与形状选项

corner-shape直译为"角形状"，其本质是扩展border-radius的行为。默认的round值生成经典圆角，但通过简单语法即可切换为五种专业级形状：

.element {
  border-radius: 30px; /* 基础半径 */
  corner-shape: round | scoop | bevel | notch | squircle; /* 形状选择 */
}

五种角形状对比图：round（圆角）、scoop（凹槽）、bevel（斜角）、notch（缺口）、squircle（超椭圆）

进阶技巧：通过superellipse(K)函数可自定义任意形状。例如，superellipse(1)生成标准圆角，superellipse(4)逼近矩形。变量K控制曲率——值越大，角越尖锐。这在创建品牌专属图形时极具价值：

.brand-shape {
  border-radius: 40px;
  corner-shape: superellipse(3.5); /* 定制化曲率 */
}

superellipse()参数可视化：展示 K=0.5 至 K=8 的角形状变化

底层原理：corner-shape通过重定义角的几何处理逻辑工作。当设置bevel时，它用直线替代圆弧；notch则添加微小内凹。这一切无缝集成在渲染管线中，确保边框阴影等装饰属性自动适配新形状。

二、实战演练：从基础图形到复杂设计

仅用bevel值配合border-radius调整，就能生成专业级图形。关键技巧是结合百分比单位和aspect-ratio，实现响应式布局。

1. 八边形与菱形：数学的优雅解法

八边形本质是八个等长斜边的组合。通过calc()和 CSS 数学函数可精确计算半径：

.octagon {
  border-radius: calc(100% / (2 + sqrt(2))); /* ≈29% */
  corner-shape: bevel;
  aspect-ratio: 1; /* 强制正方形 */
}

八边形效果图：紫色背景上的等边八边形

将半径增至 50%，菱形跃然眼前：

.rhombus {
  border-radius: 50%;
  corner-shape: bevel;
  aspect-ratio: 1;
}

菱形效果图：旋转 45 度的正方形

为何优于 clip-path？

  • 边框支持：传统clip-path会裁剪边框，而corner-shape保留完整装饰层：
.rhombus-with-border {
  border: 4px solid #3498db; /* 完美贴合 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 阴影自动适配 */
}
  • 代码简洁性：相比clip-path: polygon(...)需 6-8 个坐标点，此处仅需两行核心代码。

在线演示：菱形与八边形+边框效果

2. 六边形：响应式设计的典范

六边形的秘诀在于非对称半径。调整垂直/水平半径比例，并用cos()函数锁定宽高比：

.hexagon {
  border-radius: 50% / 25%; /* 水平50%，垂直25% */
  corner-shape: bevel;
  aspect-ratio: cos(30deg); /* ≈0.866 */
}

六边形生成过程：从菱形过渡到六边形

设计优势：此方法比传统 CSS 六边形方案（如伪元素叠加）简洁 50%。aspect-ratio确保图形在移动端自动缩放，无需媒体查询。

六边形生成器演示

3. 三角形：边框挑战与破解方案

三角形需将部分半径设为 0 以"禁用"对应角：

.triangle-up {
  border-radius: 50% / 100% 100% 0 0; /* 仅顶部弯曲 */
  corner-shape: bevel;
}

三角形效果图：等边三角形

边框修复术：直接添加边框会导致厚度不均。通过微调边框宽度解决：

.triangle-border {
  border-top: 6px solid #e74c3c; /* 顶部加厚 */
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

数学公式可精确计算比例（如等边三角形需顶部边框为侧边的 √3 倍），但实战中微调更高效。

三角形大全：10 种变体演示

三、高级应用：静态尺寸与动态组合

1. 斜边效果：固定尺寸的妙用

当元素宽度变化时，用像素单位固定斜边尺寸：

.slanted-header {
  border-top-right-radius: 80px 100%; /* 水平80px, 垂直100% */
  corner-shape: bevel;
}

此技术适用于 Banner 或卡片设计，突出视觉层次感。

2. 箭头按钮与数据容器

结合非对称半径创建指向性图形：

.arrow-button {
  border-radius: 80px / 0 50% 50% 0; /* 右侧半圆 */
  corner-shape: bevel;
  background: #9b59b6;
}

箭头按钮交互演示

3. 梯形与平行四边形：数据可视化利器

.trapezoid-chart {
  border-radius: 80px / 100%0100%0; /* 上下交替 */
  corner-shape: bevel;
}
.parallelogram-label {
  border-radius: 80px / 100%100%00; /* 仅顶部弯曲 */
  corner-shape: bevel;
}

几何图形集合：梯形、平行四边形等

四、创意爆发：混合形状与实战案例

corner-shape支持角级控制，为每个角分配不同形状：

.custom-arrow {
  border-radius: 40px;
  corner-shape: notch bevel round scoop; /* 左上|右上|右下|左下 */
}

混合形状箭头：notch+bevel 组合

行业应用场景：

  • 数据仪表盘：用斜边六边形制作动态指标卡
  • 游戏 UI：squircle 形状的按钮提升触感反馈
  • 品牌设计：superellipse 定制 Logo 容器

结语：开启你的 CSS 图形革命

corner-shape不仅简化了图形绘制（代码量比clip-path减少 60%），更通过原生支持边框、阴影和渐变，解决了 CSS 历史上的顽固难题。在 Chrome 率先支持后，现在正是实验的黄金期——尝试用bevel和notch混合设计导航菜单，或为电商卡片添加 squircle 边框提升转化率。