前端开发中经常需要用到三角形比如下拉箭头气泡对话框的尖角。用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 法遇到渐变色的三角形再考虑用渐变拼接。最后大家还是自己动手试一下会比只看记得更牢。