在网页导航设计中，标签页是最常见的交互组件之一。传统做法多用 CSS 边框叠加生成小三角，但这种方法在需要标签整体呈三角形收尾、且内部还要正常排布文字时显得笨拙。clip-path 提供的路径裁剪能力，允许我们按坐标点直接切掉元素边角，从而用纯样式画出形状自由的标签。
一、clip-path 基础与 polygon 用法
clip-path 是 CSS 中用于限制元素可视区域的属性，其取值可以是基本图形、SVG 引用或几何函数。在标签页场景中，最实用的是 polygon 多边形函数，它接收一组以百分比或像素表示的顶点坐标，浏览器只渲染落在多边形内的部分。
例如一个宽高固定的标签，希望右侧呈现四十五度尖角，就可以把右上角向内部收一点。坐标系统以元素左上角为原点，向右为 x 正方向，向下为 y 正方向。理解这一点后，调整顶点就能控制尖角大小和位置。
/* 基础三角形标签页裁剪 */
.tab {
width: 120px;
height: 40px;
background: #3498db;
clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}
上面代码把矩形右侧中间向外凸出，形成箭头状标签。如果反过来想做左侧尖角，只需把第一个和最后一个顶点向内部移动。这种写法比边框法直观，也不需要额外伪元素占位。
二、完整标签页栏的实现
单个标签画好之后，通常还要把它们排列成一行，并让激活态有不同背景。由于 clip-path 不会占据布局空间，标签之间可以用普通的 flex 排版，尖角会自然相邻。为避免相邻标签背景重叠造成缝隙，一般让后一个标签向左负边距偏移。
下面的示例展示三个标签组成的导航，激活项使用橙色，其余为灰色。注意 padding 应预留右侧空间，防止文字被裁掉。同时父容器设置 overflow 可见，否则尖角可能被截。
<div class="tabs"> <div class="tab active">首页</div> <div class="tab">文章</div> <div class="tab">关于</div> </div>
.tabs {
display: flex;
}
.tab {
width: 100px;
height: 36px;
line-height: 36px;
text-align: center;
background: #ccc;
clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
margin-right: -10px;
padding-right: 10px;
}
.tab.active {
background: #e67e22;
z-index: 2;
}
这里 margin-right 为负值，使下一个标签左移，覆盖前一个的右尖角，形成连续标签页效果。z-index 保证激活标签盖在兄弟元素之上。若不加 padding-right，文字会太靠近裁剪边而被切。
三、clip-path 与伪元素方案对比
除了 clip-path，也有人用伪元素画三角形拼在标签旁。伪元素法的好处是兼容极旧浏览器，但缺点明显：伪元素脱离文档流，难以随内容伸缩；在响应式缩小标签时，三角形大小不会自动按比例变化，常出现错位。
clip-path 则完全基于元素自身盒模型，视口变化时点坐标按百分比重算，天然适配响应式。下表列出两者主要差异：
| 维度 | clip-path 方案 | 伪元素方案 |
|---|---|---|
| 兼容性 | 现代浏览器全支持 | 几乎全支持 |
| 响应式 | 百分比坐标自动适配 | 需媒体查询手动调 |
| 结构复杂度 | 单元素完成 | 依赖 before/after |
从维护成本看，clip-path 明显更优。若项目不需照顾 IE 等老引擎，应优先采用路径裁剪。
四、常见误区与注意事项
一个容易踩的坑是认为 clip-path 会改变元素命中区域。实际上裁剪只影响绘制，被切掉的部分仍会响应点击，除非用 JavaScript 额外处理。若标签有链接，用户点空白尖角外区域也可能触发跳转。
另一个误区是在 clip-path 上使用 transition 期望尖角平滑变形。多数浏览器对 polygon 点数一致的裁剪支持动画，但点数不同则无过渡。因此设计交互态时，保持顶点数量相等才能做出流畅效果。
/* 可过渡的悬停放大尖角 */
.tab {
clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
transition: clip-path 0.2s;
}
.tab:hover {
clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
}
上述代码悬停时尖角更尖，由于顶点数相同，浏览器可做补间。若改成三角型三顶点则动画失效。掌握该规律能避免无效调试。
五、小结
使用 clip-path 创建三角形标签页，核心在于用 polygon 描述收尾坐标，并配合负边距与内边距实现连贯导航。它比传统边框或伪元素更简洁、更易响应，是现代前端可视化的实用技巧。实际开发中，只需按设计稿比例换算顶点，即可快速复用。