CSS实现内凹图形可通过多种灵活方法达成，clip-path属性是最直接的方式，通过polygon()定义多边形路径，调整关键点坐标即可形成内凹边缘，如将矩形某个角向内收缩，伪元素结合边框技巧也能实现，例如用两个重叠元素，通过边框旋转与遮罩制造凹陷效果，conic-gradient渐变可生成扇形或环形内凹图案，适用于装饰性元素，这些方法各有优势：clip-path路径控制精准，伪元素兼容性较好，渐变则适合复杂纹理，常用于按钮装饰、卡片设计等场景，为界面增添层次感与视觉趣味。
CSS 内凹图形实现技巧：从基础到创意应用
在网页设计的视觉语言中,独特的图形效果往往能瞬间提升界面的吸引力和识别度。“内凹图形”——即图形边缘向内收缩、形成“凹陷”视觉效果的独特形状——正成为设计师手中的利器，它广泛应用于按钮、卡片、装饰元素等场景，为设计注入微妙的层次感与精致的细节，相较于依赖图片实现内凹效果的传统方式，CSS 凭借其无与伦比的灵活性、完美的矢量可缩放性以及便捷的维护性，已成为实现此类效果的更优选择，本文将系统性地介绍多种 CSS 实现内凹图形的核心方法，从基础原理到创意应用，助您掌握这一实用且强大的设计技巧。
什么是内凹图形？为何优先选择 CSS 实现？
内凹图形,顾名思义，是指图形的一个或多个边缘主动向内收缩，形成具有“凹陷”视觉特征的几何形态，其表现形式多样：一个圆形边缘向内凹陷形成三角形缺口；矩形的某个边角向内折叠、形成折痕效果；或者卡片边缘呈现波浪状的起伏凹陷，这些形态共同点在于打破了标准的几何边界，营造出更具动态感和设计感的视觉体验。
选择 CSS 实现内凹图形具有显著优势：
- 完美可缩放性：基于矢量特性，内凹图形在任意分辨率下均能保持清晰锐利，彻底告别因缩放导致的模糊问题。
- 高效易维护：仅需修改 CSS 样式属性（如形状、颜色、尺寸），即可快速调整内凹效果，无需重新设计或切图，大幅提升开发效率。
- 动画交互友好：CSS 内凹图形天然支持过渡（Transition）和动画（Animation）效果，可轻松实现按钮点击时的“按压凹陷”反馈、卡片悬停时的微妙形变等动态交互，增强用户体验。
- 性能卓越：纯 CSS 实现避免了额外的图片资源加载请求，有效减少 HTTP 请求，显著提升页面加载速度和渲染性能。
CSS 实现内凹图形的 5 种核心方法
方法 1：clip-path —— 最强大的“形状裁剪大师”
clip-path 是 CSS3 引入的一项革命性属性，它允许开发者精确地裁剪元素的显示区域，定义出几乎任意复杂的形状路径，无论是多边形、圆形、椭圆还是自定义路径，clip-path 都能精准控制，使其成为实现内凹图形（尤其是复杂内凹形态）的首选和最灵活的工具。
原理与基础应用
clip-path 的工作原理是创建一个“裁剪路径”（Clipping Path），只有位于该路径内部的元素部分才会被显示，通过定义路径坐标点，可以轻松创建具有内凹边缘的形状，最常用的函数是 clip-path: polygon();，它通过指定一系列顶点坐标来定义多边形路径。
示例：创建带三角形缺口的圆形
假设我们需要一个圆形,但在顶部边缘有一个向内凹陷的三角形缺口：
.circle-with-notch {
width: 200px;
height: 200px;
background-color: #3498db;
border-radius: 50%; /* 先创建基础圆形 */
clip-path: polygon(
0% 0%, /* 左上角 */
100% 0%, /* 右上角 */
100% 40%, /* 右侧，从顶部向下 40% 处 */
60% 40%, /* 向左移动 40% (形成凹陷起点) */
50% 50%, /* 凹陷顶点 (向内 10%) */
40% 40%, /* 向左移动 10% (形成凹陷终点) */
0% 40% /* 左侧，从顶部向下 40% 处 */
);
}
**关键点解析：**
* 通过调整 polygon() 中顶点的坐标，特别是中间几个点的位置（如示例中的 60% 40%, 50% 50%, 40% 40%），我们精确地控制了内凹三角形的深度和位置。
* 可以结合 border-radius 先创建基础形状（如圆形、圆角矩形），再用 clip-path 进行精细裁剪，实现更复杂的内凹效果。
* 支持百分比（相对于元素自身尺寸）和具体像素值，定位非常灵活。
进阶潜力
clip-path 的强大远不止于此：
* **路径函数丰富**：可使用 circle(), ellipse(), inset() (创建内凹矩形) 等内置函数快速生成基础形状，再结合 polygon() 或叠加多个路径实现复杂内凹。
* **动态路径**：结合 CSS 变量（Custom Properties）和 JavaScript，可以动态改变 clip-path 的路径值，实现交互式形变（如根据鼠标位置产生内凹）。
* **浏览器兼容性**：现代浏览器对 clip-path 支持良好，可配合 clip-path: url(#id) 使用 SVG 定义更复杂的路径，或使用前缀和回退方案处理旧浏览器。
`clip-path` 是实现复杂、精确内凹图形的利器，其灵活性和强大功能使其成为首选方案，尤其适合需要高度定制化和动态效果的创意设计。
