CSS箭头三角形——茴香豆的几种写法

CSS样式中，难免遇上装饰性的箭头or三角，从实际操作，有以下几种玩法：

• 直接字符打出：
  //箭头
  ↑↓→←↘↙<>

  //三角
  ▲△▼▽
  

优势很明显，速度，但是缺陷也很明显，虽说可调正font-size\color，但自定义方面太局限，往往缺乏设计美感，不符合需求

• 图片
  百试不爽的图片，这倒是我们又偷懒又省事的办法，在设计玩花样的时候，这个确实是我们不得不用，用了就停不下的良方。

• CSS
  CSS写出一些基本的样式还是可以的，原理是设置一个元素的width:0,height:0,加以边框transparent属性，同时追一条根据箭头方向的border.写了个demo,部分内容见下：

<!--<div id="triangle-up"></div>-->
#triangle-up{
  width:0;
  height:0;
  border:25px solid transparent;
  border-bottom:50px solid pink;
}

<!--div id="arrow-up">
  <em></em>
</div>-->
#arrow-up{
  position:relative;
  width:0;
  height:0;
  border:50px solid transparent;
  border-bottom:50px solid pink;
}

#arrow-up em{
  position:absolute;
  left:-50px;
  top:-48px;
  width:0;
  height:0;
  border:50px solid transparent;
  border-bottom:50px solid #fff;
}

完整代码在[这里](https://jsfiddle.net/onvno/wbv6ytx2/10/)
箭头的代码是参照了百度首页的效果

参考：
纯CSS绘制三角形（各种角度）
百度