如何使用css实现一个三角形？

创建一个无内容的 div 元素，并添加了 triangle 类名来应用样式。接下来的 CSS 代码用于创建三角形的效果。

<div class="triangle"></div>

首先，我们将宽度和高度设为 0，这样元素的可见区域就没有大小了。接着，我们使用 border 属性创建三角形的边框。border-left 和 border-right 属性将创建顶点相接的两条斜边，而 border-bottom 属性将创建底边。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #000;
}

通过添加 transform: rotate(45deg); 来旋转元素，使得其变为一个三角形。
透明的边框（border-left: 50px solid transparent; 和 border-right: 50px solid transparent;）创建了一个等腰直角三角形。然后，我们再通过 border-bottom 属性设置底边的大小和颜色。
 

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #000;
  transform: rotate(45deg);
}