三角形绘制方法

CSS 三角形绘制方法主要是利用：transparent（透明）

transparent

用来指定全透明色彩。
transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
在CSS3中，transparent被延伸到任何一个有color值的属性上。

我们可以想象下一个正方形

正方形示例

去掉（隐藏-》透明）画X的部分就是我们需要的

上三角：左右隐藏，给border-bottom添加值

div.triangle-up {
  width:0px;
  height:0px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:5px solid #FFC90D;
}

下三角：左右隐藏，给 border-top添加值

div.triangle-down {
  width:0px;
  height:0px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #FFC90D;
}

右三角：上下隐藏，给 border-left添加值

div.triangle-right {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;
  border-top:5px solid transparent;
  border-left:5px solid #FFC90D;
}

左三角：上下隐藏，给 border-right添加值

div.triangle-right {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;
  border-top:5px solid transparent;
  border-right:5px solid #FFC90D;
}