用CSS伪元素画三角形的核心原理是：宽高为0时，通过设置三边透明、一边有色的边框，利用边框交界处的斜角视觉错觉形成三角形；口诀为向上用border-bottom、向下用border-top、向左用border-right、向右用border-left。
用 CSS 伪元素（如 ::before 或 ::after）配合 border 属性画三角形，是前端开发中常用且轻量的技巧。核心原理是：当一个元素宽高为 0，仅设置不同方向的边框，且颜色不同时，相邻边框会在交界处形成斜角——利用这个视觉错觉就能“拼出”三角形。
基础原理：0宽高 + 三边透明 + 一边有色
要画一个向下的三角形，关键在于：
- 把元素的
width和height设为0 - 设置上边框（
border-top）为实色，其他三边（border-right、border-bottom、border-left）设为透明或同色但不可见 - 透明边框仍占据空间，与有色边框在对角处交汇，自然形成三角形尖角
常见方向三角形写法（用 ::after 举例）
假设你有一个按钮，想在右侧加一个小箭头三角形：
.btn::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid #333; /* 向右的三角形 */
margin-left: 4px;
}对应方向口诀：
立即学习“前端免费学习笔记（深入）”；
Find JSON Path Online
下载
Easily find JSON paths within JSON objects using our intuitive Json Path Finder
-
向上：
border-bottom有色，其余透明 -
向下：
border-top有色，其余透明 -
向左：
border-right有色，其余透明 -
向右：
border-left有色，其余透明
用伪元素画三角形的实用要点
实际使用时注意这些细节，避免错位或显示异常：
- 必须声明
content: ''，否则伪元素不会渲染 - 推荐用
display: inline-block或block，便于定位和尺寸控制 - 可通过
margin或transform: translate()微调位置，比绝对定位更灵活 - 若需带阴影或旋转，可对伪元素单独加
filter: drop-shadow()或transform: rotate()
扩展：画等腰直角三角形或小提示气泡
比如做一个带小尾巴的提示框（tooltip），主框用普通元素，小三角用 ::after 挂在底部居中：
.tooltip::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666; /* 向上的小三角，作为气泡尾巴 */
}此时三角形底边宽度 = 左右透明边框宽度之和（6px + 6px = 12px），高度 = 有色边框宽度（6px），构成标准等腰直角三角形。
