利用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就能高效实现三角形，而且易于维护和缩放。