在网页开发中，三角形是一类高频出现的装饰图形，常用于下拉箭头、提示气泡或标签缺角。常规的边框法只能生成实心三角，当视觉设计要求在三角形上开出缺口，例如一侧内凹或中心镂空，就需要换用更灵活的绘制思路。本文主要介绍两种实用方案：基于clip-path的矢量裁切，以及利用伪元素遮挡的叠层法。
一、使用clip-path绘制带缺口三角形
clip-path允许我们用多边形坐标定义元素的可见区域，坐标之外的部分会被直接裁掉。通过合理设置顶点，不仅能画出普通三角形，还能在边上制造凹陷缺口。这种方式属于矢量操作，放大后边缘依然清晰。
下面示例用一个正方形容器，通过polygon定义五个点，其中两个相邻点向内收缩，从而在底边形成缺口。代码中的百分比是相对于元素自身尺寸的定位。
.triangle-gap {
width: 200px;
height: 200px;
background: #3498db;
/* 五个点：左上、右上、右中偏下、底边缺口左、底边缺口右、回到左下 */
clip-path: polygon(
0% 0%,
100% 0%,
100% 70%,
60% 100%,
40% 100%,
0% 70%
);
}
上述代码生成的图形顶部为水平边，两侧向下收拢，底部中央留出一段缺失，形成带缺口的倒梯形三角。若想做更尖锐的顶角，只需把前两个点的y坐标设为0%、x坐标改为50%附近即可。
clip-path的优势在于可配合transition实现缺口开合动画，且形状完全由坐标控制，修改缺口位置非常直观。缺点是IE浏览器完全不支持，在需要兼容老环境时要谨慎。
动态改变缺口大小
我们可以用CSS变量结合JavaScript动态调整坐标，让缺口随状态变化。以下示例通过修改自定义属性控制底部缺口宽度。
.triangle-dyn {
--gap: 20%;
width: 160px;
height: 160px;
background: #e74c3c;
clip-path: polygon(
50% 0%,
100% 100%,
calc(50% + var(--gap) / 2) 100%,
calc(50% - var(--gap) / 2) 100%,
0% 100%
);
}
这段样式把三角形做成标准尖顶，底部用两个计算点挖空中间部分。在脚本里修改--gap的值，缺口就会实时伸缩，适合做折叠面板指示标。
二、伪元素遮挡法实现视觉缺口
如果不想依赖clip-path，还可以利用层叠关系：先画出完整三角形，再放一个与页面背景同色的伪元素覆盖在局部，造成“缺口”错觉。这种方法兼容到IE8以上，适合保守项目。
核心思路是父级用边框法生成三角形，子级或伪元素绝对定位到缺口处，背景取外部容器颜色。如下代码展示一个右侧带凹陷的蓝色三角。
<div class="tri-wrap"> <div class="tri"></div> <span class="cover"></span> </div>
.tri-wrap {
position: relative;
width: 0;
height: 0;
}
.tri {
width: 0;
height: 0;
border-left: 100px solid #2ecc71;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
.cover {
position: absolute;
left: -80px;
top: -20px;
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 50%;
}
这里.tri是一个向右的实心三角，.cover是一个白色圆块，叠在三角左部，看起来就像三角形右侧被挖掉一块弧形缺口。注意cover的背景色必须与三角所处背景一致，否则穿帮。
该方案的局限是缺口形状受遮挡物限制，只能做规则几何遮挡，且无法做透明背景下的真镂空。如果页面背景是渐变或图片，遮挡色就难以匹配。
用伪元素替代额外标签
为减少DOM节点，可以把cover改为父级的::after。下面代码功能相同，但结构更干净。
.tri-single {
position: relative;
width: 0;
height: 0;
border-left: 120px solid #9b59b6;
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
}
.tri-single::after {
content: "";
position: absolute;
left: -95px;
top: -25px;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
}
使用伪元素后，HTML只需一个标签，维护成本更低。但原理与前面一致，依然是视觉欺骗式缺口。
三、方案对比与选型建议
从兼容性、灵活度、语义透明度三个维度比较两种方案：
| 方案 | 兼容性 | 缺口复杂度 | 透明背景支持 |
|---|---|---|---|
| clip-path裁切 | 现代浏览器，无IE | 任意多边形 | 支持 |
| 伪元素遮挡 | IE8及以上 | 仅规则遮挡 | 不支持 |
如果项目面向移动端或现代Web应用，优先用clip-path，它能真实镂空且易于动画。若是后台管理系统且需照顾旧终端，遮挡法更稳妥。实际开发中也可将两者结合：用clip-path画主形，伪元素做交互热区修饰。
理解这两种绘制带缺口三角形的机制后，类似的气泡尖角、缺角标签都能举一反三实现，不必再引入图片资源，减少请求并提升渲染清晰度。