前端入门必学：用CSS实现三角形的常用三种方式
前端开发中经常需要用到三角形，比如下拉箭头，气泡对话框的尖角。用CSS画比切图更灵活，并且改颜色，改大小一行代码就能搞定，非常方便。
常见有三种实现方法：
第一种.border边框
1. 实现原理
我们可以用 “切披萨” 的举例来理解： 一块正方形披萨，沿着两条对角线切两刀，刚好分成 4 块形状相同的等腰三角形，而每一块就对应元素的一条边框。
当我们把元素的width和height都设为 0 时，元素没有了内容区域，四条边框会向中心聚拢，各自形成一个独立的等腰三角形，紧密拼接在一起。 我们只保留其中一条边框的填充色，把另外三条边框设置为透明色，最终剩下的可见部分就是一个完整的三角形。
2：代码实例+效果展示
代码：效果：
尺寸对应关系：
- 左右边框宽度各 50px，相加后就是三角形的底边总宽度 100px
- 下边框的宽度 80px，就是三角形的垂直高度 最终效果：生成一个底边宽 100px、高 80px、尖角向上的纯色等腰三角形
3：讲方向变化
想改方向很简单，想让尖角朝哪儿，就保留对面那条边框的颜色：
尖角向上➡保留border-bottom颜色
尖角向下➡保留border-top颜色
尖角向左➡保留border-right颜色
尖角向右➡保留border-left颜色
4.关键注意事项：
必须同时设置width: 0; height: 0;。如果元素有宽高，边框会被内容区域撑开，三角形形状会变形，无法得到标准效果。
第二种.clip-path裁减法
1. 实现原理
这个方法可以用「剪纸逻辑」来理解： 我们先准备一块完整的矩形色块（相当于一张矩形彩纸），再通过polygon()多边形函数，依次指定三个顶点的坐标，沿着坐标连线把矩形多余的部分裁掉，剩下的可见区域就是我们想要的三角形。
它的坐标系规则很简单：
- 元素的左上角为坐标原点
(0, 0) - x 轴水平向右延伸，y 轴垂直向下延伸
- 坐标推荐用百分比书写，会自动跟随元素尺寸自适应，不用反复计算像素值
2：代码实例+效果展示
代码：效果：
书写规则：每组坐标先写 x 轴位置，再写 y 轴位置，多组坐标用逗号分隔。 最终效果：生成一个底边宽 100px、高 80px、尖角向上的等腰三角形。 想要调整三角形的形状、方向，只需要修改三个顶点的坐标即可。
3：讲优势
这个方法最大的特点是：元素本身具备的样式，裁剪后会完整保留，不会因为裁剪丢失效果：
- 背景是渐变色，裁剪后就是渐变色三角形
- 背景是图片，裁剪后就是三角形图片
- 元素内部的文字、内阴影等效果，也会跟随裁剪区域显示
除此之外，它还支持绘制任意多边形，不止局限于三角形，拓展性极强。
4.关键注意事项：
坐标点的书写顺序不能混乱，必须顺着同一个方向（顺时针或逆时针）依次连接顶点；顺序错乱会导致裁剪区域异常，无法得到预期的三角形。
第三种.linear-gradient线性渐变法
1. 实现原理
核心思路是拆分拼接：正方形可以沿对角线拆分为两个完全对称的直角三角形。
我们通过两层背景渐变，分别占据元素宽度的左右两半：
- 左半部分生成「直角在左下角」的直角三角形
- 右半部分生成「直角在右下角」的直角三角形
利用线性渐变的硬色阶特性 —— 在同一位置设置两个颜色的分界点，让一半区域显示填充色、另一半完全透明，最终拼接成一个完整的等腰三角形。
2：代码实例+效果展示
代码：效果：
最终效果：生成一个底边宽 100px、高 80px、尖角向上的等腰三角形。
3. 关键注意事项
必须用
background复合属性，不能写background-color。我们需要同时设置渐变图像、背景位置、背景尺寸，属于「多背景叠加」场景；background-color仅能设置纯色填充，无法承载渐变和多背景配置。渐变参数顺序不能乱固定顺序：先写倾斜角度 / 方向，再写「颜色 + 分界比例」。 示例：
linear-gradient(45deg, 红色 50%, 透明 50%)，其中 50% 是硬分界点 —— 小于 50% 的区域显示实色，大于 50% 的区域透明。
好了，三种方法就全部讲完了。
总结：
大家可以记住一个原则： 日常写页面做小箭头，直接用 clip-path 最快；如果要兼容老项目，就切回 border 法；遇到渐变色的三角形，再考虑用渐变拼接。
最后大家还是自己动手试一下，会比只看记得更牢。