css 直角三角形

/* 使用 CSS 创建直角三角形 */

/* 1. 左下角直角三角形 */
.triangle-left-bottom {
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 设置左边框为透明 */
  border-bottom: 50px solid red;       /* 设置底边框为红色，形成直角三角形 */
}

/* 2. 右下角直角三角形 */
.triangle-right-bottom {
  width: 0;
  height: 0;
  border-right: 50px solid transparent; /* 设置右边框为透明 */
  border-bottom: 50px solid blue;       /* 设置底边框为蓝色，形成直角三角形 */
}

/* 3. 左上角直角三角形 */
.triangle-left-top {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;  /* 设置左边框为透明 */
  border-top: 50px solid green;         /* 设置顶边框为绿色，形成直角三角形 */
}

/* 4. 右上角直角三角形 */
.triangle-right-top {
  width: 0;
  height: 0;
  border-right: 50px solid transparent; /* 设置右边框为透明 */
  border-top: 50px solid yellow;        /* 设置顶边框为黄色，形成直角三角形 */
}

解释说明：

• width: 0; height: 0;：将元素的宽度和高度设置为 0，使它看起来像一个点。
• border：通过设置不同方向的边框（如 border-left, border-bottom 等），并将其颜色设为透明或指定颜色，可以创建出不同方向的直角三角形。
• 直角三角形的方向：通过调整哪条边有颜色、哪条边是透明的，可以控制三角形的方向。例如，border-bottom 和 border-left 组合可以创建左下角的直角三角形。

你可以根据需要调整边框的大小和颜色来改变三角形的尺寸和样式。