用css实现一个等腰三角形的小图标

你可以使用 CSS 的 border 属性来创建一个等腰三角形。核心思想是创建一个元素，并将其宽度和高度设置为 0，然后巧妙地利用 border 的透明边框来形成三角形。

以下是如何创建一个指向上方的等腰三角形：

.triangle-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent; /* 左右两边透明 */
  border-right: 10px solid transparent;
  border-bottom: 20px solid red; /* 底部边框形成三角形 */
}

解释：

• width: 0; 和 height: 0; 将元素本身的尺寸设置为零，使其不可见。
• border-left 和 border-right 设置为透明，并且宽度相同，这将形成三角形的两个斜边。
• border-bottom 设置为你想要的颜色和宽度，这将形成三角形的底边。

你可以通过修改 border-bottom 的颜色和宽度来改变三角形的颜色和大小。

指向其他方向的三角形：

• 指下:

.triangle-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid red; /* 顶部边框形成三角形 */
}

• 指左:

.triangle-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid red; /* 右边边框形成三角形 */
}

• 指右:

.triangle-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid red; /* 左边边框形成三角形 */
}

为了更方便地使用，你可以将这些样式定义成一个可复用的 CSS 类。 记住调整边框宽度来控制三角形的大小。 例如，border-left: 15px solid transparent; 和 border-bottom: 30px solid red; 将创建一个更大的三角形。

希望这些信息能帮到你!