CSS箭头－茴的几种写法

[onvno]

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

完整代码在这里

[songhlc]

可行，但并不够实用