CSS画三角形是一个经典的前端技巧，面试中出现的频率非常高，实际项目里也经常用于制作气泡箭头、下拉框指示器、tooltip小尾巴等界面元素。它不需要任何图片资源，仅靠几行CSS代码就能实现，而且可以随意改变大小、颜色和方向。这篇文章将从border的渲染原理讲起，一步步带你理解三角形到底是怎么画出来的。
一、三角形的核心原理：border的交界线
要理解CSS三角形，必须先弄清楚浏览器的border渲染规则。大多数人平时使用边框时，元素都有宽高，四条边框看起来就是环绕在四周的直线。但事实上，边框与边框之间的交界处并不是垂直切割的，而是以斜线的方式衔接的。也就是说，一条边框的端部是一个斜角，相邻两条边框通过这条斜线自然过渡。
当元素有宽高时，这些斜角只出现在四个角落，视觉上不明显。但当我们把元素的宽度和高度都设为0时，四条边框就会从四面八方挤压到同一个中心点，此时每条边框都变成了一个完整的三角形，四个三角形拼在一起形成一个正方形区域。可以通过下面的代码直观感受一下：
.triangle-demo {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: red green blue yellow;
}运行这段代码后，页面上会出现一个由红、绿、蓝、黄四个三角形拼成的大正方形。这就是画三角形的基础：既然四条边框本身就是四个三角形，那么只要把不需要的三条边框设为透明（transparent），只保留一条有颜色，一个三角形就诞生了。
二、各种方向三角形的代码写法
掌握了原理之后，实现不同方向的三角形就非常简单了。规律也很容易记：想让三角形指向哪个方向，就把对边设为可见颜色，其余三边设为透明。比如想要一个向上的箭头，就给border-bottom上色，因为下边框的三角形尖端朝上。
下面是四个基本方向的三角形代码：
/* 向上的三角形 */
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid #3498db;
}
/* 向下的三角形 */
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid #e74c3c;
}
/* 向左的三角形 */
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 80px solid #2ecc71;
}
/* 向右的三角形 */
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 80px solid #f39c12;
}这里有两个可以调整的参数：border-width决定了三角形的高（即尖角到对边的距离），而左右两条透明边框的宽度共同决定了三角形的底边宽度。例如向上三角形的例子中，80px是高，50px加50px就是底边总宽度。通过调整这两个数值的比例，可以得到瘦长或扁平的三角形。
如果想要直角三角形，做法是只保留相邻两条边框，其中一条有色、一条透明，另外两条边框宽度设为0。比如：
/* 左上直角三角形 */
.triangle-corner {
width: 0;
height: 0;
border-top: 80px solid #9b59b6;
border-right: 80px solid transparent;
}这样就得到一个占据左上位置的直角三角形，常用于制作角标、标签的折角效果等。同样的思路还可以画出梯形：只要给元素保留一定的宽度，上下边框就会变成梯形形状，这在设计下拉菜单的指示箭头时很实用。
三、用伪元素实现气泡提示框
三角形最常见的实际应用就是气泡提示框（tooltip）的小尾巴。如果直接在HTML中添加一个空元素专门用来画三角形，会让DOM结构变得冗余。更优雅的做法是使用::before或::after伪元素，把三角形挂在气泡容器上，HTML保持干净整洁。
下面是一个完整的气泡框示例：
.tooltip {
position: relative;
padding: 12px 18px;
background: #333;
color: #fff;
border-radius: 6px;
margin-top: 30px;
}
/* 用伪元素画出朝下的小尾巴 */
.tooltip::after {
content: "";
position: absolute;
bottom: -12px; /* 向下偏移一个边框宽度的距离 */
left: 24px;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid #333; /* 颜色与气泡背景一致 */
}几个细节需要注意：伪元素必须设置content属性，否则不会显示；定位时偏移量要与边框宽度对应，保证小尾巴刚好贴在气泡边缘而不留缝隙也不重叠；三角形的颜色要和气泡背景色保持一致，这样视觉上才是连贯的整体。
如果气泡带有边框，小尾巴还需要再加一层稍大的深色三角形垫底，模拟出描边效果，也就是用两个三角形叠加的方式实现带边框的箭头。这种叠加技巧在需要描边或阴影的场景中是标准做法。
四、替代方案与兼容性考虑
border方案虽然经典，但也有一些局限。例如它画出来的三角形无法直接加阴影（box-shadow会作用于整个盒子而不是三角形形状）、无法设置渐变色、在老版本浏览器中透明边框可能出现黑色虚线。针对这些问题，现代CSS提供了几种替代方案。
第一种是使用clip-path属性，直接对矩形元素做裁剪，得到真正的三角形形状，支持渐变背景：
.triangle-clip {
width: 100px;
height: 90px;
background: linear-gradient(45deg, #3498db, #2ecc71);
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}第二种是使用SVG，绘制一个<polygon>元素，优点是可以精确控制顶点坐标，缩放不失真，还能使用任意填充和描边。第三种是使用transform: rotate(45deg)旋转一个正方形，再配合父容器的overflow: hidden裁剪出箭头，这种方案在移动端一些组件库里比较常见。
综合来看，如果只是简单的纯色三角形，border方案兼容性最好、代码最短，依然是首选；如果需要渐变、阴影或复杂形状，则推荐clip-path或SVG。理解border画三角形的原理，不仅仅是为了这一个技巧，更是为了深入理解CSS盒模型中边框的渲染机制，这对日后处理各种UI细节都很有帮助。