css如何画三角形

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;
}