利用CSS边框特性可绘制三角形：设置宽高为0的元素，通过赋予单一边框颜色、其余透明实现；例如向下三角形设置border-bottom有色，其余透明；方向不同则改变有色边框方向，常用于箭头、角标等场景。
在CSS中绘制三角形，主要是利用元素的边框（border）特性来实现。一个常见技巧是将一个没有宽度和高度的盒子，通过设置不同颜色或透明度的边框，形成三角形视觉效果。
基本原理：利用透明边框
创建三角形的核心思路是：
- 设置一个宽高为0的div
- 给这个div设置四个方向的边框
- 将其中三条边设置为透明（transparent）
- 保留一条边为有颜色的边框，就会呈现出三角形
例如，想显示一个向下的红色三角形：
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid red;
}这样，只有底部边框可见，左右边框成为倾斜的“斜边”，整体看起来就是一个向下的三角形。
立即学习“前端免费学习笔记（深入）”；
生成不同方向的三角形
只需控制哪一边的边框有颜色，其余为透明即可：
- 向上三角形：设置 border-bottom 有色
- 向下三角形：设置 border-top 有色
- 向左三角形：设置 border-right 有色
- 向右三角形：设置 border-left 有色
实际应用示例
常用于下拉菜单的箭头、提示框的小角标等。比如一个常见的小箭头：
.arrow-down {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #000;
}也可以通过调整边框大小控制三角形的尖锐程度。边框越大，三角形越明显。
基本上就这些。不需要图片，纯CSS就能高效实现三角形，而且易于维护和缩放。
