用css画出三角形

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

1.倒三角形

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

2.正三角形

.triangle {
  width: 0;
  height: 0;
  border-bottom: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

3.左边三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid #333;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

4.右边三角形

.triangle {
  width: 0;
  height: 0;
  border-right: 20px solid #333;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

5.直角三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid #333;
  border-top: 20px solid transparent;
}

6.倾斜三角形

.triangle {
  width: 0;
  height: 0;
  border-right: 20px solid #333;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transform: rotate(150deg);
}