一、从面试现场到技术迭代

"用CSS画个三角形？"面对面试官的提问，我没有急着写border代码，而是打开了clip-path编辑器。这个小插曲背后，藏着前端开发十年的技术演进。

二、传统border画法：被时代淘汰的"茴字四写法"

大多数开发者的第一反应是利用border属性的特性：将元素宽高设为0，通过设置不同方向边框的透明度来形成三角形。

这种方法需要精确计算边框宽度，代码冗长且难以维护。以向上的三角形为例：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #000;
}

更麻烦的是方向调整，需要重新组合不同边的边框属性。

三、clip-path：现代CSS的几何革命

clip-path属性通过定义裁剪区域来塑造元素形状，用polygon函数绘制三角形只需一行代码：

.triangle {
  width: 100px;
  height: 100px;
  background: #000;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

这种方式支持任意顶点的多边形绘制，修改顶点坐标即可调整形状，甚至能实现圆角三角形、不规则多边形等复杂图形。

四、为什么说border画法正在被淘汰？

1. 开发效率：clip-path代码量减少60%，无需记忆边框组合规则
2. 可维护性：修改形状只需调整坐标点，避免"牵一发而动全身"
3. 扩展性：支持动画过渡（需配合clip-path动画属性）
4. 兼容性：2025年最新数据显示，全球97.3%的浏览器已原生支持clip-path（包括移动端）

五、实战技巧：从三角形到复杂图形

掌握clip-path后可实现更多创意：

• 用polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)绘制菱形
• 结合@keyframes实现形状变换动画
• 使用path()函数导入SVG路径

六、技术选型的思考

虽然clip-path优势明显，但在以下场景仍需考虑border方案：

• 需兼容IE浏览器的政府/企业项目
• 对元素边框有特殊样式要求时
• 极简环境下无法加载前缀处理器时

技术演进的本质是工具的迭代，但解决问题的思路永远比工具本身更重要。下次面试再遇到这个问题，你会怎么回答？