CSS箭头-茴的几种写法

@onvno 2016-09-11 14:08:28发表于 iuap-design/blog

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

完整代码在这里