如何用CSS绘制三角形？

等腰三角形

<div class="sanjiaoxing"></div>

.sanjiaoxing {
  /* 盒子宽高默认都是0 */
  width: 0;
  height: 0;
}
/* 1.等腰三角形 */

.sanjiaoxing {
  /* 给四条边添加10px的透明边框 */
  border: 30px solid transparent;
  /* 哪个边框作为三角形，单独设置颜色即可 */
  border-bottom-color: chartreuse;
}

等腰直角三角形

<div class="sanjiaoxing"></div>

/* 2.直角三角形 */
/* 第一种方案 */
/* 直角等腰三角形 */

.sanjiaoxing {
  border: 30px solid transparent;
  border-bottom-color: chartreuse;
  /* 在等腰三角形的基础上，再添加一个边的颜色 */
  border-left-color: chartreuse;
}
/* 第二种方案 */

.sanjiaoxing {
  border: 0px solid transparent;
  border-top-width: 30px;
  border-left: 30px solid chartreuse;
}

直角三角形

<div class="sanjiaoxing"></div>

.sanjiaoxing {
  border: 0px solid transparent;
  border-top-width: 30px;
  /* 将顶部的width给宽一点既可实现此效果 */
  border-top-width: 40px;
  border-left: 30px solid chartreuse;
}