css如何画三角形

.triangle {
  display: inline-block;
  margin-right: 10px;

  /* 基础样式 */
  border: solid 10px transparent;
}

/* 向下三角形 */
.triangle.bottom {
  border-top-color: #f00;
}

/* 向上三角形 */
.triangle.top {
  border-bottom-color: #f00;
}

/* 向左三角形 */
.triangle.left {
  border-right-color: #f00;
}

/* 向右三角形 */
.triangle.right {
  border-left-color: #f00;
}