如何通过CSS border宽度挤压技巧实现边框三角形的绘制？

本文共计899个文字，预计阅读时间需要4分钟。

本质上是利用了CSS边框在交界的斜角渲染机制。当你将一个元素的宽度设为0，再给某一侧设置颜色，其他三边设置为透明或无色时，浏览器会将四条边在中心点交汇，形成可见的三角形区域。

常见错误现象：border: 10px solid red画出来是菱形，不是三角；或者三角方向不对、边缘模糊、在Retina屏上发虚。

• 必须同时设置width: 0和height: 0，否则边框会撑开容器，三角被“淹没”
• 只保留需要的那一侧边框有颜色，其余三侧必须用transparent（不能用none或0，否则不渲染斜角）
• 边框宽度决定三角大小，但三边宽度之和要平衡：比如向下箭头用border-top: 10px solid #000 + border-left: 10px solid transparent + border-right: 10px solid transparent

怎么控制三角形的方向和大小

方向由哪条边设色决定，大小由边框宽度和相邻透明边的宽度共同挤压成型。不是“画”出来的，是“挤”出来的。

使用场景：下拉菜单箭头、气泡对话框指向、步骤流程图指示器。